webpack的配置与优化

webpack 启动命令配置

在package.json中配置启动命令 除了 npm start 外 运行dev和build都需要加 run 例：npm run build

 "scripts": {
   "start": "npm run dev",  //启动开发模式 简化命令
   "dev": "npx webpack serve --config ./config/webpack.dev.js",  //启动开发模式 
   "build": "npx webpack --config ./config/webpack.prod.js"   // 启动生产模式
 }

webpack.config.js文件拆分

webpack.config.js 根据生产环境不同拆分成了webpack.dev.js和webpack.prod.js 统一放在了config目录下。因为两各环境中，webpack工作的侧重点不同所以需要分开配置。

生产环境

生产模式是开发完成代码后，我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化，让其运行性能更好。优化主要从两个角度出发:

1. 优化代码运行性能
2. 优化代码打包速度

browserlist 浏览器兼容性设置

在package.json 中可以通过设置 browserlist:[]来控制css样式浏览器的兼容程度

 "browserslist": ["last 2 version", "> 1%", "not dead"]

表示所有浏览器只兼容 最近的两个版本，兼容市面上99%的浏览器，只兼容没有死掉的浏览器

OneOf

打包时每个文件都会经过所有的Loader处理，虽然因为test正则原因没有实际处理，但是都要过一遍，比较慢。

Exlude Include

可以用在loader、plugins中，目的是在使用这些loader或plugin时指定文件范围。比如一般node_modules中的文件我们不需要用babel-loader作处理，那么就可以用exlude排除

    {
     test: /\.js$/,
      exclude: /node_modules/, //排除node_modules中的文件不转译
      loader: 'babel-loader',
    }

Cache 缓存优化

每次打包js文件都要经过Eslint和Babel编译，速度比较慢，因此我们可以缓存之前的编译结果，提高下次打包速度。

  new ESlintWebpackPlugin({
            //指定检查文件的根目录
            context: path.resolve(__dirname, '../src'),
            //  include: path.resolve(__dirname, '../src')
            exclude: "node_modules",
            cache:true, //开启缓存
            //指定缓存文件路径
           cacheLocation:path.resolve(__dirname,'../node_modules/.cache/eslintcache')
        }),

   //babel-loader 配置
     {
          test: /\.js$/,
          exclude: /node_modules/, //排除node_modules中的文件不转译
          loader: 'babel-loader',
          options:{
             cacheDirectory:true,  //开启缓存
             cacheCompression:false //关闭缓存文件压缩
           }
                       
      }    

Thread 多线程打包

当项目越来越庞大时，打包速度越来越慢，因此我们可以通过开启多线程打包来提升打包速度。webpack打包主要针对js文件，包括eslint、babel、terser(webpack内置插件，用于js压缩)，因此我们主要对这三个工具开启多线程打包。

//安装线程包
npm i thread-load -d

//引入相关文件
const os = require('os')
const TerserPlugin = require('terser-webpack-plugin')
//创建threads线程
const threads = os.cpus().length

配置

//babel配置
{
  test: /\.js$/,
     exclude: /node_modules/, //排除node_modules中的文件不转译
     use: [
         {
          loader: 'thread-loader', //开启多线程
          options: {
              workers: threads
          }
          },
          {
            loader: 'babel-loader',
            options: {
               cacheDirectory: true,  //开启缓存
                cacheCompression: false //关闭缓存文件压缩
            }
          },
          ]
}

//terser-plugin 配置
    optimization:{
        minimize:true,
        minimizer:[
            // css压缩也可以写到optimization.minimizer里面，效果一样的
            new CssMinmizerPlugin(),
            // 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
            new TerserPlugin({
                parallel:threads //terser开启多线程
            })
        ]
    },

//eslint 配置
  new ESlintWebpackPlugin({
            //指定检查文件的根目录
            context: path.resolve(__dirname, 'src'),
            //include: path.resolve(__dirname, 'src')
            exclude: "node_modules",
            cache:true, //开启缓存
            //指定缓存文件路径
            cacheLocation:path.resolve(__dirname,'../node_modules/.cache/eslintcache'),
            threads  //开启多线程
        }),

Tree Shaking

webpack 5的生产模式默认启动，它的作用是忽略文件中那些没有引用到的代码，从而减小代码体积、提高打包速度

@babel/plugin-transform-runtime

需要先下载，然后再bable-loader中进行配置。他的作用是禁用babel对每个文件的runtime注入，而是统一从 一个文件中获取，从而减少代码体积

  {
                                loader: 'babel-loader',
                                options: {
                                    cacheDirectory: true,  //开启缓存
                                    cacheCompression: false, //关闭缓存文件压缩
                                    plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
                                }
                            },