CSS文件处理

提取CSS为单独文件

• 安装mini-css-extract-plugin: 提取js中的css
• 在css的loader设置中加入：

CSS兼容性处理

• 安装postcss-loader: 3.0.0
• 安装postcss-preset-env: 6.7.0
• 在css的loader设置中加入：

• 在package.json中加入：

CSS压缩

• 安装optimize-css-assets-webpack-plugin
• 引入optimize-css-assets-webpack-plugin:

• 在plugins中使用optimize-css-assets-webpack-plugin:

Js处理

Js语法检查

• 语法检查：eslint-loader eslint
• 注意只检查js开发代码，第三方库的js的不检查
• 设置检查规则: package.json中的eslintConfig中设置
• 下载 eslint, eslint-config-airbnb-base, eslint-plugin-import, eslint-loader

• package.json中配置

• eslint不希望出现console.log() 开发中可以使用eslint-disable-next-line注释

Js兼容性处理

• 下载babel-loader, @babel/preset-env, @babel/core
• 只能转换基本语法

• 需要做全部Js的兼容处理,使用@babel/polyfill

    import '@babel/polyfill' // 引入即可

• 由于直接只用@babel/polyfill会使打包的js文件体积变大，会有很多无用代码
• 需要按需加载:corejs，而且不能再import引入@babel/polyfill

Js压缩

• 将mode更改为production,会开启生产环境的自动压缩
• 生产环境会使用UglifyJsPlugin压缩代码

HTML压缩