webpacke学习+proxy代理

今天学习下webpack

首先是需要安装的依赖，这些依赖都是用与生产环境也就是 -D
这里注意sass-loader千万不要安装8版本以上会出现问题，
我在这里就卡了好久后来发现降版本到7.3.1就可以

"scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server"
  },
"devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.9.5",
    "babel": "^6.23.0",
    "babel-loader": "^8.1.0",
    "babel-node": "^0.0.1-security",
    "css-loader": "^3.5.3",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.2.0",
    "html-withimg-loader": "^0.1.16",
    "less": "^3.11.1",
    "less-loader": "^6.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.14.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "sass-loader": "^7.3.1",
    "style-loader": "^1.2.0",
    "terser-webpack-plugin": "^2.3.5",
    "url-loader": "^4.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }

下面先把整个源码放进来然后一一讲解

const path = require('path');//这里是nodejs内置模块用来进行路径的加载
const htmlWebpackPlugin = require('html-webpack-plugin');//这是读取html用的插件
const Minicssextractplugin = require('mini-css-extract-plugin');//加载css
const optimizecssassetswebpackplugin = require('optimize-css-assets-webpack-plugin');//和上面的css压缩的插件配合使用
const terserwebpackplugin = require('terser-webpack-plugin');//因为配置了css的压缩他就会影响到js的默认压缩，所以要引入新得插件来解决这个问题
module.exports = {
    optimization:{//这里就是配置css压缩和js压缩
        minimizer:[new optimizecssassetswebpackplugin({}),new terserwebpackplugin({})]
    },
    mode:'development',//如果是production打包后的代码会压缩 ，development打包后的代码不会压缩
    devServer:{//配置服务
        port:8000,//这里是端口设置
        open:true,//这里就是npm run dev就能自动打开浏览器
        contentBase:'./src/index.html',//这就是服务打开的文件
        //这里是webpack自带的跨域处理，所以打包后跨域不会保留
        proxy:{//代理配置解决跨域
            '/zyjy':{//这里就是http://xxxx.com/zyjy/course这种请求的/zyjy
                target:"http://xxxx.com",//这就是域名
                pathRewrite:{"/zyjy":""}//去掉路由前缀加上他访问的就是http://xxxx.com/course
            }
        }
    },
    entry:'./src/index1.js',//这是入口文件
    output:{//出口文件
        path:path.resolve(__dirname , 'dist'),//打包后输出的路径
        filename:'index[hash:8].js'//这里就是输出的文件名里面[]是hash防止浏览器缓存
    },
    plugins:[//配置插件
        new htmlWebpackPlugin({//读取文件中的html文件
            template:'./src/index.html',
            filename:'index.html',
            hash : true//这是和上面的对应的hash，要同时配置才生效
        }),
        new Minicssextractplugin({//加载css插件
            filename:'index.css',
        })
    ],
    module:{
        rules:[
            {//这里就是配置babel
                test:/\.js$/,
                use:{
                    loader:'babel-loader',
                    //可以配置options也可以用.babelrc
                    //也可以选择我现在的options进行配置
                    options:{
                        presets:[//es6-es5
                            '@babel/preset-env'
                        ],
                        plugins: [//转换class的插件
                        	//可以搜索babel官网查询这个插件就有用法
                            ["@babel/plugin-proposal-class-properties", { "loose": true }]
                          ]
                    }
                }
            },
            {
                test:/\.html$/,//加载html文件
                use:'html-withimg-loader'
            },
            {
                test:/\.(png|jpg)$/,//这里是对图片的配置加载图片
                use:{
                    loader:'url-loader',
                    options:{//设置下面的是为了减少http请求让页面加载的更快
                        limit:100*1024, //小于100kb变成base64
                        esModule:false //如果不设置这个HTML中img的路径会出现问题
                    }
                }
            },
            {//这里是css进行编译  less scss三种进行编译都可以不想要哪个去掉就好
                test:/\.(css|less|scss)$/,
                use:[Minicssextractplugin.loader,'css-loader','less-loader','sass-loader']
            },
        ]
    }
}

这里就是webpack的基本配置当然还有分页我们下次在继续讲解