一、js语法检查（eslint-loader）

语法检查：希望团队写代码的风格差不多，还可以检查常见语法错误
eslint-loader，依赖于eslint库，因为这个插件对node modules里的也生效，所以注意设置只检查源代码，不检查第三方库，因为早就检查过了，用exclude排除第三方库。并且要在package.json中的eslintConfig中设置检查规则：推荐使用方法airbnb（在github中有详细介绍，该如何写js代码）（npm eslint-config-airbnb让这个js风格指南在eslint中生效）
npm eslint-config-airbnb-base eslint-plugin-import eslint

自动修复eslint：fix：true

二、js兼容性处理eslint（babel/…）

1.@babel/preset-env如果有es6语法，如果代码在谷歌浏览器打开没问题，但用IE打开报语法错误，所以需要js兼容处理babel-loader （此外，还需要下载@babel/preset-env，@babel/core）
presets：预设，要进行怎样转换，做怎样的兼容性处理，预设环境的兼容性处理，如果有es6语法就会帮忙转成es5或者以下的语法
babel/preset-env只能转换一些基本js语法，例如promise就没法转换

2.所以需要升级成@babel/polyfill 做全部js兼容性处理
npm i @babel/polyfill -D
在js文件直接引入上面这个就可以了，不需要在wp配置
这个也有个问题就是：我只要解决部分兼容性问题，但这个包把所有兼容性代码全部引入了，体积太大，所以有第三种解决方案
3.core-js按需加载，需要做兼容性处理的再做，加载指定的兼容性的库corejs
npm i core-js -D

三、js代码压缩、html代码压缩

只需要将mode：’development’;切换成 mode:’production’
就可以启动js压缩了，因为生产环境下会自动压缩js代码

其中UglifyJsPlugin会自动压缩js，所以不需要自己再去写插件
html没办法做兼容性处理
所以只需要进行html代码压缩，借助html-webpack-plugin
加一个minify对象里面加上压缩配置，就可以压缩了

四、生产环境基本配置

use是从下往上的，所以会先将less编译成css文件，然后再postcss处理对css文件进行处理，将css加载到js中，再通过minicss提取成单独文件

所以less-loader必须放在cssloader下面，否则会报错
css和less的处理有重复loader配置，可以提取出来进行代码服用


js


图片资源：



其他文件处理：