一、提取 css 成单独文件

导入插件： const MiniCssExtractPlugin = require('mini-css-extract-plugin');

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 
     // 这个loader取代style-loader。作用：提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
   // 将css文件整合到js文件中
 'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      // 对输出的css文件进行重命名
      filename: 'css/built.css'
    })
  ],

二、css 兼容性处理

设置nodejs环境变量：process.env.NODE_ENV = 'development'; 如果不写，默认是生产环境
css 兼容性处理：postcss —> postcss-loader postcss-preset-env

  // 使用loader的默认配置
     // 'postcss-loader',
  // 修改loader的配置
    {
     loader: 'postcss-loader',
     options: {
         ident: 'postcss',
         plugins: () => [
      // postcss的插件
         require('postcss-preset-env')()
         ]
      }
   }

用法

postcss 找到 package.json 中 browserslist 里面的配置，通过配置加载指定的 css 兼容性样式

  "browserslist": {
     // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development
        "development": [
              // 最近一个版本的谷歌，火狐，苹果浏览器
              "last 1 chrome version",
              "last 1 firefox version",
              "last 1 safari version"
            ],
     // 生产环境：默认是看生产环境
         "production": [
              ">0.2%",
              "not dead",
              "not op_mini all"
            ]
          }

三、压缩 css

导入插件：const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

 plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    }),
    // 压缩css
    new OptimizeCssAssetsWebpackPlugin()
  ],

四、js 语法检查

// 下一行eslint所有规则都失效（下一行不进行eslint检查）
// eslint-disable-next-line
module: {
    rules: [
      /*
      语法检查： eslint-loader  eslint
        注意：只检查自己写的源代码，第三方的库是不用检查的
        设置检查规则：
          package.json中eslintConfig中设置~
            "eslintConfig": {
              "extends": "airbnb-base"
            }
       airbnb --> eslint-config-airbnb-base  eslint-plugin-import eslint
      */
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // 自动修复eslint的错误
          fix: true
        }
      }
    ]
  },

五、js 兼容性处理

js 兼容性处理：babel-loader @babel/core
1. 基本 js 兼容性处理 —> @babel/preset-env
问题：只能转换基本语法，如 promise 高级语法不能转换
2. 全部 js 兼容性处理 —> @babel/polyfill
问题：只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
使用方法：import '@babel/polyfill'; 在需要兼容性处理的 js 文件中引入。
3. 需要做兼容性处理的就做：按需加载 —> core-js

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

六、js 压缩

生产环境下会自动压缩 js 代码
mode: 'production'

七、HTML 压缩

plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      // 压缩html代码
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true
      }
    })
  ],