提取css为单独文件并压缩css

依赖：mini-css-extract-plugin
     optimize-css-assets-webpack-plugin

const miniCssExtractPlugin = require('mini-css-extract-plugin')
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

module: {
       rules: [
           {
               test: /\.css$/,
               use: [
                   // 创建style标签，将js中的css放入插到页面中
                   // 缺点：样式放在js中页面会出现闪屏
                   // 'style-loader', 
                   // 这个loader取代style-loader,作用：提取js中的css成单独文件
                   miniCssExtractPlugin.loader,
                   'css-loader'
               ]
           }
       ]
   },
   plugins: [
       new miniCssExtractPlugin({
           // 对输出的文件进行重命名
           filename: 'css/built.css'
       }),
       new optimizeCssAssetsWebpackPlugin()
   ],

css兼容性处理

依赖：postcss-loader postcss-preset-env

package.json: 跟devDependencies同级
    "browserslist": {
             // 开发环境 --> 手动设置node环境变量：process.env.NODE_ENV = 'development'
                "development": [
                "> 1%",
                "last 4 versions"
                ],
                // 生产环境：默认生产环境
                "procution": [
                ">0.2%",
                "not ie<=7",
                "not op_mini all"
                ]
            }
            
postcss-preset-env: 帮postcss找到在package.json中的browserslist里面的配置，通过配置加载指定的css兼容性样式

  module: {
        rules: [{
            test: /\.css$/,
            use: [
                miniCssExtractPlugin.loader,
                'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        ident: 'postcss',
                        plugins: [
                            require('postcss-preset-env')()
                        ]
                    }
                }
            ]
        }]
    },

js兼容性处理

依赖：babel-loader @babel/core @babel/preset-env

基本兼容性处理

问题： 只能转换基本语法， 如promise高级语法不能转换

   {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    // 预设： 指示babel做怎么样的兼容性处理
                    // 例如这个可以转换箭头函数为普通函数 可以在ie低版本上执行 
                   presets: ['@babel/preset-env']
                }
            }

全部兼容性处理

依赖：@babel/polyfill
     只需要在js中直接引入就可，import '@babel/polyfill'
问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了

不清楚这个配置用不用，有空测试一下

 {
              test: /\.js$/,
              exclude: /node_modules/,
              loader: 'babel-loader',
              options: {
                  // 预设： 指示babel做怎么样的兼容性处理
                  // 例如这个可以转换箭头函数为普通函数 可以在ie低版本上执行 
                 presets: ['@babel/preset-env']
              }
          }

按需兼容

依赖： core-js
 @babel/preset-env跟core-js结合就可以完成全部的js处理，2因为打包后体积过大，不推荐

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

js和html压缩

 js压缩： mode设置为production
 html压缩：
      plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除注释
                removeComments: true
            }
        })
    ]