一、提取打包后的css文件为单独文件

使用的插件：mini-css-extract-plugin
第一步：下载并引入插件 
//下载命令
npm i mini-css-extract-plugin
//引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
第二步：使用插件 
new MiniCssExtractPlugin({
  filename: 'css/built.[contenthash:10].css'//对输出的文件进行重命名
}),
第二步：在样式的loader配置中使用MiniCssExtractPlugin.loader 
{
    test: /\.less$/,
  use: [
      MiniCssExtractPlugin.loader,
    'css-loader',
    'less-loader'
   ]
}, 

二、css兼容性处理

使用的loader：postcss
使用的插件：postcss-preset-env

1.下载loader和插件 

npm i postcss-loader postcss-preset-env

2.创建postcss.config.js文件 

module.exports = {
  plugins: [
    require('postcss-preset-env')
  ]
}

3.在css的loader中新增：postcss-loader 

{
  test: /\.css$/,
  use: [
    MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader',
  ],
 },

4.设置node环境变量

切换不同环境下的兼容性 
process.env.NODE_ENV = 'development'

5.在package.json中配置browserslist 

"browerslist": {
   "developement": [//开发环境
     "last 1 chorme version",
     "last 1 firefox version",
     "last 1 safari version"
   ],
   "production": [//生产环境
     ">0.2%",
     "not dead",
     "not op_mini all"
   ]
}


三、压缩css

使用的插件：optimize-css-assets-webpack-plugin

1.下载和引入插件 

npm i optimize-css-assets-webpack-plugin
const OptimizeCssAssetsWebpackPlugin  =  require('optimize-css-assets-webpack-plugin')

2.使用插件 

new OptimizeCssAssetsWebpackPlugin()


四、js语法检查

使用的loader：eslint-loader   eslint（eslent-loader依赖于eslint）
注意：只检查自己写的源代码，第三方库的代码不用检查，使用eslint-disable-next-line可以使eslint的规则失效(下一行不进行eslint检查，要使用//注释的方式表示)
此处使用的检查规则是airbnb，所以需要用到：eslint-config-airbnb-base    eslint-plugin-import    eslint

1.下载 

npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import

2.配置loader 

{
  test: /\.js$/,
  exclude: /node_modules/,//排除node_modules下的文件
  loader: 'eslint-loader',
  options: {
     fix: true//自动修复eslint的错误
  }
}

3.在package.json中配置相应内容 

"eslintConfig":{
  "extends": "airbnb-base",
    "env":{
        "browser":true//让eslint认识像navigator window这样的全局变量
    }
}


五、js兼容性处理

1.基本的兼容性处理

使用的loader和插件：babel-loader  @babel-core   @babel/preset-env  
问题：只能转换基本语法，如promise不能转换

（1）下载 

npm i babel-loader  @babel-core  @babel/preset-env

（2）配置 

{
   test: /\.js$/,
   exclude: /node_modules/,
   loader: 'babel-loader',
   options: {
       presets: ['@babel/preset-env']//预设，只是babel做怎么样的兼容性处理
   }
}

2.全部兼容性处理

涉及到的loader和插件(库)： @babel/polyfill
注意：会将js有关兼容性的东西全部纳入，将浏览器不能识别的方法直接定义好挂载到相应的对象上，比如Array、Object...,无论浏览器能否识别都可以用
问题：如果只需要解决部分兼容性问题，但是却将所有兼容性代码引入，体积太大
（1）下载 
npm i @babel/polyfill
（2）只需要在入口文件中引入@babel/ployfill即可 
import "@babel/ployfill"


3.按需兼容性处理

使用的loader和插件(库)：babel-loader  @babel/core  @babel/preset-env  core-js 

（1）下载 

npm i babel-loader  @babel-core  @babel/preset-env  core-js

（2）配置loader 

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    presets: [
        [
        '@babel/preset-env',//预设，只是babel做怎么样的兼容性处理
        {
          useBuiltIns: 'usage',// 按需加载
          corejs: {//指定core-js的版本
              version: 3
          },
          targets: {//指定兼容性到浏览器的哪个版本
          chrome: '60',
          firefox: '60',
          ie: '9',
          safari: '10',
          edge: '17'
         }
       }
       ]
    ],
  }
}


六、js/html压缩

1.js压缩

将mode设置为production

2.HTML压缩

设置html-webpack-plugin插件 
new HtmlWebpackPlugin({
  template: './src/index.html',
  minify: {//压缩html代码
    collapseWhitespace: true,//清除空格
    removeComments: true//清除注释
  }
}),