尚硅谷 webpack高级配置 笔记

webpack高级配置

所谓的高级配置其实就是进行webpack优化

• 提升开发体验

• 提升打包构建速度

• 减少代码体积

• 优化代码运行性能

提升开发体验

SourceMap —— 代码映射

为什么

所有css和js合并成一个文件，并且多了其他代码。此时如果代码运行出错，那么提示代码错误位置我们是看不懂的（标注的是编译后的代码出错位置）。一旦将来开发代码文件很多，那么就很难取发现错误出现在哪里

所以我们需要更加准确的错误提示，来帮助我们更好的开发代码

是什么

SourceMap（源代码映射）是一个用来生成源代码和构建后代码——映射的文件的方案

它会生成一个xxx.map文件，李米娜包含源代码和构建后代代码每一行、每一列的映射关系。当构建后代码出现错误，会通过xxx.map文件，从构建后代码出现位置找到映射后源代码出错位置，从而让浏览器提示圆代码文件出错位置，帮助我们更快的找到错误

怎么用

通过查看https://webpack.js.org/configuration/devtool/可知，SourceMap有很多种情况

但是实际开发种我们只需要关注两种情况即可：

• 开发环境：cheap-module-source-map

  • 优点：打包编译速度块，值包含映射

  • 缺点：没有列映射

module.exports = {
    // 其他省略
    mode:"development",
    devtool:"cheap-module-source-map"
}

• 生产模式：source-map

  • 优点：包含列/行映射

  • 缺点：打包编译速度更慢

module.exports = {
    // 其他省略
    mode:"production",
    devtool:"source-map"
}

提高打包构建速度

HotModuleReplacement —— 热模块替换

为什么

开发时我们修改了其中一个模块代码，webpack默认会将所有模块全部重新打包编译，速度很慢

所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包的速度就能很块

是什么

HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、添加或删除代码，无需重新加载整个页面

怎么用

module.exports = {
    //...其他配置省略
    // 在服务器中开启
    devServer:{
        //...
        hot:true // 开启HMR功能（只能用于开发环境，生产环境不需要）
    }
}

注意点

在webpack.config.js中配置的热加载，知识针对css和html，当js文件发生改变，那么整个项目还是会重新打包编译的

js热模块替换

// 判断是否支持热模块替换
if(module.hot){
    // 接受热加载的文件
    module.accept("./js/count")
}

这样子，当接受热加载的文件出现修改，那么就替换改模块，不需要重修编译

但是，当js文件过多的时候，上面的写法会很麻烦，所以实际上我们会使用其他loader来处理

比如：vue-loader，react-hot-loader

OneOf —— 防止向下匹配

为什么

打包时每个文件都需要经过所有loader处理，虽然因为test正则，对不符合的文件实际上没有进行处理，但是都要过一遍，处理速度慢

【举例】

需求：处理less文件

问题：在loader中处于第一个的位置，但是less处理完后，仍会向下匹配

是什么

顾名思义就是只能匹配上一个loader，剩下的就不匹配了

怎么用

module:{
    rules:[
        {
            // 每个文件只能被其中一个loader配置处理
            oneOf:[
                // ....各种loader的配置
            ]
        }
    ]
}

Include/Exclude —— 排除插件或库的编译

为什么

开发时我们需要使用第三方的库或插件，所有文件都下载到node_modules中，而这些文件时不需要编译就可以直接使用的

所有我们在对js文件处理时，要排除node_modules下面的文件

是什么

• include

  包含，值处理xxx文件

• exclude

  排除，处理xxx文件以外其他文件都处理

注意：include和exclude，两者只能使用一个

怎么用

在loader和plugin中都可以进行配置

// 比如babel-loader的配置
{
    test:/\.js$/,
    include:path.resolve(__dirname,"../src")
    loader:"babel-loader"
}

// 比如eslint的配置
plugins:[
    new ESLintPlugin({
        context:path.resolve(__dirname,"../src"),
        exclude:"node_modules"
    })
]

Cache —— 缓存Eslint和Babel

为什么

每次打包时js文件都要经过Eslint检查和Babel编译，速度比较慢

我们可以缓存之前的Eslint检查和Babel编译结果，这样第二次打包时速度就会更快

是什么

对Eslint检查和Babel编译结果进行缓存

怎么用

babel缓存

{
    test:/\.js$/,
    loader:"babel-loader",
    options:{
        presets:["@babel/preset-env"],
        cacheDirectory:true, // 开启缓存
        cacheCompression:false // 关闭缓存文件压缩，为了增加速度
    }
}

eslint缓存

plugins:[
    new ESLintPlugin({
        // 检测哪些文件
        context:path.resolve(__dirname,"../src"),
        cache:true, // 开启缓存
        cacheLocation:path.resolve(__dirname,"../node_modules/.cache/eslintcache") // 缓存目录
    })
]

Thead —— 多进程

为什么

当项目越来越庞大时，打包速度越来越慢，我们想要继续提升打包速度，其实就是要提升js的打包速度，因为其他文件都比较少

而对js文件处理主要就是eslint、babel、terser三个工具

我们可以开启多进程同时处理js文件，这样速度就比之前的单进程打包更快

是什么

多进程打包：开启电脑的多喝进程同时干一件事，速度更快

需要注意：请仅在特别耗时的操作中使用，因为每个进程启动就有大约600ms左右的开销

怎么用

我们启动进程的数量就是我们cpu的核数

1. 如何获取cup的核数，因为每个电脑都不一样

   // nodejs核心代码，直接使用
   const os = require("os")
   // cpu核数
   const threads = os.cpus().length-1
   

2. 下载包

   npm i thread-loader -D
   

3. 使用

   const os = require("os")
   const threads = os.cpus().length-1
   module.exports = {
     // ...
     module: {
       rules: [
         {
           test: /\.js$/,
           include: path.resolve('src'),
           use: [
                 {
                   loader:"thread-loader", // 开启多线程
                   options:{
                       works:threads // 进程数量
                   }
               }，{
                   loader:"babel-loader",
                   options:{
                       // babel配置
                   }
               }
           ],
         },
       ],
     },
     plugins:[
         new ESLintPlugin({
           // 其他配置
           threads // 开启多进程和进程数量
         })  
     ]
   };
   

Terser —— 压缩j文件

const TerserWebpackPlugin = require('terser-webpack-plugin')
...
plugins:[
    new TerserWebpackPlugin({
        parrallel:threads // 开启多进程和设置进程数量
    })
]

减少代码体积

Tree Shaking —— 除去没用代码

为什么

开发的时候我们定义一些工具函数库，或者引用第三方宫颈炎函数库或组件库

如果特殊处理的化，我们打包时会引入整个库，但是实际上可能我们只用上极小部分的功能

这样将整个库都打包进去，体积就太大了

是什么

Tree Shaking是一个术语，通常用于描述移出JavaScript中没有使用上的代码

注意：它依赖ES Module

怎么用

webpack已经默认开启这个功能，无需配置

Babel

为什么

Babel为编译的每个文件都插入辅助代码，使代码体积过大

Babel对一些公共方法使用了非常小的辅助代码，比如_extend。默认情况下会被添加到每一个需要它的文件中

你可以将这些辅助代码作为一个独立模块，来避免重复引入

是什么

@babel/plugin-transform-runtime：禁止了babel自动对每个文件的runtime注入，而是引入@babel/plugin-transform-runtime并且是所有辅助代码从这里引入

怎么用

npm i @babel/plugin-transform-runtime -D

{
    ...
    use:[
        {
             loader:"babel-loader",
             options:{
                plugins:["@babel/plugin-transform-runtime"]
            }   
        }
    ]
}

Image Minimizer —— 压缩图片

为什么

开发如果项目引用较多图片，那么图片体积会比较大，将来请求速度比较慢

我们可以对图片进行压缩，减少图片体积

注意：如果项目中图片都是在线链接，那么就不需要。本地项目静态图片才需要进行压缩

是什么

image-minimizer-webpack-plugin：用来压缩图片的插件

怎么用

npm i image-minimizer-webpack-plugin imagemin -D

还有剩下包需要下载，有两种模式：

• 有损模式

  npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo --save-dev
  

• 无损模式

  npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev
  

使用

该plugin可在plugins中进行配置，也可在optimization.minimizer中配置

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const { extendDefaultPlugins } = require("svgo");

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        type: "asset",
      },
    ],
  },
  optimization: {
      // 压缩操作
    minimizer: [
      "...",
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminMinify,
          options: {
            // Lossless optimization with custom option
            // Feel free to experiment with options for better result for you
            plugins: [
              ["gifsicle", { interlaced: true }],
              ["jpegtran", { progressive: true }],
              ["optipng", { optimizationLevel: 5 }],
              // Svgo configuration here https://github.com/svg/svgo#configuration
              [
                "svgo",
                {
                  plugins: extendDefaultPlugins([
                    {
                      name: "removeViewBox",
                      active: false,
                    },
                    {
                      name: "addAttributesToSVGElement",
                      params: {
                        attributes: [{ xmlns: "http://www.w3.org/2000/svg" }],
                      },
                    },
                  ]),
                },
              ],
            ],
          },
        },
      }),
    ],
  },
};

优化代码运行性能

Code Split —— 代码分割

为什么

打包代码会将所有js代码打包到一个文件中，体积过大。我们如果只要渲染首页，就应该只加载首页的js文件，其他文件不应该加载

所以我们需要将打包生成的文件进行代码分割，生成多个js文件，渲染哪个页面就只加载某个js文件，这样加载的资源就少，速度就更快

是什么

代码分割主要做两件事：

• 分割文件：将打包生成的文件进行分割，生成多个js文件
• 按需加载：需要哪个文件就加载哪个文件

怎么用

代码分割实现有不同的方式

1. 多入口

   module.exports = {
       // entry:'./src/main.js' 只有一个入口文件，单入口
       entry:{
           // 多个入口文件，多入口
           app:"./src/app.js",
           main:"./src/main.js"
       },
       out :{
           path:path.resolve(__dirname,"dist"),
           filename:"[name].js" // webpack命名方式，[name]以文件名自己命名，此处的文件名依据entry中的key进行命名
       }
   }
   

   但是，这样就出现了问题：如果多个入口文件中出现一个共同的文件，那么每个入口文件都会将这个公共的文件进行再次打包，这样就增加了文件体积

   问题的解决——添加optimization配置

   module.exports = {
     //...
     optimization: {
       splitChunks: {
         chunks: 'all', // 对所有模块都进行分割
           // 以下为默认配置
          // minSize: 20000,  // 默认值分割代码最小的大小，20kb
         // minRemainingSize: 0, // 类似minSize,最后确保提取的文件大小不能为0
         // minChunks: 1, // 至少被引用的次数，满足条件才会被代码分割
         // maxAsyncRequests: 30, // 按需加载并行加载的文件的最大数量
         // maxInitialRequests: 30, //入口js文件最大并行请求数量
         // enforceSizeThreshold: 50000, // 超过50kb一定会单独打包（此时会忽略minRemainingSize、maxAsyncRequests、maxInitialRequests)
         // cacheGroups: { // 组，哪些模块要打包成一个组
         //  defaultVendors: { // 组名
         //   test: /[\\/]node_modules[\\/]/, // 需要打包到一起的模块
         //    priority: -10, // 权重（越大越高）
         //    reuseExistingChunk: true, // 如果当前chunk包含已从主bundle中拆分出的模块，则它将被重要，而不是生成新的模块
         //  },
         //  default: { // 其他没有写的配置会使用上面的默认值
         //   minChunks: 2, // 这里的minChunks权重最大
         //    priority: -20,
         //    reuseExistingChunk: true,
         //  },
         //},
       },
     },
   };
   

2. 按需加载，动态导入

   // count.js
   export default count = (a,b) => {
       console.log(a+b)
   }
   

   // main.js
   document.getElementById('btn').onclick = function(){
       // import动态引入，会将动态导入的文件代码分割（拆分成单独模块），在需要使用的时候自动加载
       imort("./count").then(res => {
           console.log("模块加载成功",res.default(2,1))
       })
   }
   

3. 单入口

   开发时我们可能是单页面应用（SPA），只有一个入口（单入口），那么我们需要这样配置

   module.exports = {
       entry:'./src/main.js' ,
       optimization:{
           splitChunks:{
               chunks:"all"
           }
       }
   }
   

4. 给模块起名

   配置打包后的文件名

   module.exports = {
       // ...
       output:{
           // 给打包输出的其他文件命名
           chunkFilename:"static/js/[name].js"
       },
   }
   

   给文件取名

   document.getElementById('btn').onclick = function(){
       // /*webpackChunkName:"math"*/ webpack魔法命名
       imort(/*webpackChunkNmae:"math"*/"./count").then(res => {
           console.log("模块加载成功",res.default(2,1))
       })
   }
   

Preload/Prefetch —— 立即加载|空闲加载

为什么

我们前面已经做了代码分割，同时会使用import动态导入语法来进行代码按需加载（我们也称懒加载，比如路由的懒加载就是这样实现的）

但是加载速度还不够好，比如：用户点击按钮才加载这个资源，如果资源体积过大，那么用户会感到明显卡顿效果

我们想在浏览器空闲事件，加载后续需要使用的资源。我们就需要用上Preload或Prefetch技术

是什么

• Preload：告诉浏览器立即加载资源
• Prefetch：告诉浏览器在空闲时才开始加载资源

共同点

• 都只会加载资源，并不执行
• 都有缓存

区别

• Preload加载优先级高，Prefetch加载优先级低
• Preload只能加载当前页面需要使用的资源，Prefetch可以加载当前页面资源，也可以加载下一个页面需要的资源

总结

• 当前页面优先级高的资源用Preload加载
• 下一个页面需要使用的资源Prefetch加载

怎们用

webpack4.6+增加了对prefetching 和preloading

import(/* webpackPrefetch: true */ './path/to/LoginModal.js');

这将导致<link rel="prefetch" href="login-modal-chunk.js">被附加到页面的头部，这将指示浏览器在空闲时间预取login-modal-chunk.js文件。

import(/* webpackPreload: true */ 'ChartingLibrary');

当请求使用 的页面时，ChartComponent还会通过请求图表库块<link rel="preload">

Network Cache

为什么

将来开发时我们对静态资源会使用缓存来优化，这样浏览器第二次请求资源就能读取缓存了，速度很快。

但是这样的话就会有一个问题, 因为前后输出的文件名是一样的，都叫 main.js，一旦将来发布新版本，因为文件名没有变化导致浏览器会直接读取缓存，不会加载新资源，项目也就没法更新了。

所以我们从文件名入手，确保更新前后文件名不一样，这样就可以做缓存了。

是什么

它们都会生成一个唯一的 hash 值

• fullhash（webpack4 是 hash）

每次修改任何一个文件，所有文件名的 hash 至都将改变。所以一旦修改了任何一个文件，整个项目的文件缓存都将失效。

• chunkhash

根据不同的入口文件(Entry)进行依赖文件解析、构建对应的 chunk，生成对应的哈希值。我们 js 和 css 是同一个引入，会共享一个 hash 值。

• contenthash

根据文件内容生成 hash 值，只有文件内容变化了，hash 值才会变化。所有文件 hash 值是独享且不同的。

怎么用

module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
        // [contenthash:8]使用contenthash，取8位长度
        filename: "static/js/[name].[contenthash:8].js", // 入口文件打包输出资源命名方式
        chunkFilename: "static/js/[name].[contenthash:8].chunk.js", // 动态导入输出资源命名方式
        assetModuleFilename: "static/media/[name].[hash][ext]", // 图片、字体等资源命名方式（注意用hash）
        clean: true,
    },
    // ...
    plugins:[
        // ....
        // 提取css成单独文件
        new MiniCssExtractPlugin({
            // 定义输出文件名和目录
            filename: "static/css/[name].[contenthash:8].css",
            chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
        }),
    ]
}

• 问题：

当我们修改 math.js 文件再重新打包的时候，因为 contenthash 原因，math.js 文件 hash 值发生了变化（这是正常的）。

**但是 main.js 文件的 hash 值也发生了变化，这会导致 main.js 的缓存失效。**明明我们只修改 math.js, 为什么 main.js 也会变身变化呢？

• 原因：
  • 更新前：math.xxx.js, main.js 引用的 math.xxx.js
  • 更新后：math.yyy.js, main.js 引用的 math.yyy.js, 文件名发生了变化，间接导致 main.js 也发生了变化
• 解决：

将 hash 值单独保管在一个 runtime 文件中。

我们最终输出三个文件：main、math、runtime。当 math 文件发送变化，变化的是 math 和 runtime 文件，main 不变。

runtime 文件只保存文件的 hash 值和它们与文件关系，整个文件体积就比较小，所以变化重新请求的代价也小

optimization:{
    runtimeChunk:{
        name:entrypoint => `runtime~${entrypoint.name}.js`
    }
}

Core-js —— 加强兼容

为什么

过去我们使用babel对js代码进行兼容性处理，其中使用@babel/preset-env智能预设来处理兼容性问题

它能将ES6的一些语法进行编译转换，比如箭头函数等，但是如果是async函数、promise对象、数组的一些方法(include)等，它没办法处理

所以此时我们js代码仍然存在兼容性问题，一旦遇到低版本浏览器会直接报错，所以我们想要将js兼容性问题彻底解决

是什么

core-js是专门用来做ES6以及以上API的polyfill

polyfill翻译过来叫做垫片/补丁。就是用社区上提供的一些代码，让我们早不兼容某些新特性的浏览器上，使用该新特性

怎么用

• 下载包

  npm i core-js
  

• 手动全部引入

  // main.js
  import "core-js"; // 全部引入
  import count from "./js/count";
  import sum from "./js/sum";
  // 引入资源，Webpack才会对其打包
  import "./css/iconfont.css";
  import "./css/index.css";
  
  // 添加promise代码
  const promise = Promise.resolve();
  promise.then(() => {
    console.log("hello promise");
  });
  
  

  这样引入会将所有兼容性代码全部引入，体积太大了。我们只想引入 promise 的 polyfill。

• 手动按需引入

  import "core-js/es/promise";
  
  // 添加promise代码
  const promise = Promise.resolve();
  promise.then(() => {
    console.log("hello promise");
  });
  

  只引入打包 promise 的 polyfill，打包体积更小。但是将来如果还想使用其他语法，我需要手动引入库很麻烦。

• 自动按需引入

  // babel.config.js
  module.exports = {
    // 智能预设：能够编译ES6语法
    presets: [
      [
        "@babel/preset-env",
        // 按需加载core-js的polyfill
        { useBuiltIns: "usage", corejs: { version: "3", proposals: true } },
      ],
    ],
  };
  
  

  此时就会自动根据我们代码中使用的语法，来按需加载相应的 polyfill 了。

PWA —— 离线运行

为什么

开发 Web App 项目，项目一旦处于网络离线情况，就没法访问了。

我们希望给项目提供离线体验

是什么

渐进式网络应用程序(progressive web application - PWA)：是一种可以提供类似于 native app(原生应用程序) 体验的 Web App 的技术。

其中最重要的是，在 离线(offline) 时应用程序能够继续运行功能。

内部通过 Service Workers 技术实现的。

怎么用

1. 下载包

   npm i workbox-webpack-plugin -D
   

2. 修改配置文件

   const WorkboxPlugin = require("workbox-webpack-plugin");
   module.exports = {
       // ...
       plugins:[
           new WorkboxPlugin.GenerateSW({
               // 这些选项帮助快速启用 ServiceWorkers
               // 不允许遗留任何“旧的” ServiceWorkers
               clientsClaim: true,
               skipWaiting: true,
           }),
       ]
   }
   

3. 修改入口文件

   // ....
   
   if ("serviceWorker" in navigator) {
     window.addEventListener("load", () => {
       navigator.serviceWorker
         .register("/service-worker.js")
         .then((registration) => {
           console.log("SW registered: ", registration);
         })
         .catch((registrationError) => {
           console.log("SW registration failed: ", registrationError);
         });
     });
   }
   

4. 运行指令

   npm run build
   

   问题

   此时如果直接通过 VSCode 访问打包后页面，在浏览器控制台会发现 SW registration failed。

   因为我们打开的访问路径是：http://127.0.0.1:5500/dist/index.html。此时页面会去请求 service-worker.js 文件，请求路径是：http://127.0.0.1:5500/service-worker.js，这样找不到会 404。

   答案

   实际 service-worker.js 文件路径是：http://127.0.0.1:5500/dist/service-worker.js。

5. 解决路径问题

   • 下载包

     npm i serve -g
     

     serve 也是用来启动开发服务器来部署代码查看效果的。

   • 运行命令

     serve dist
     

     此时通过 serve 启动的服务器我们 service-worker 就能注册成功了。

总结

我们从 4 个角度对 webpack 和代码进行了优化：

1. 提升开发体验

• 使用 Source Map 让开发或上线时代码报错能有更加准确的错误提示。

1. 提升 webpack 提升打包构建速度

• 使用 HotModuleReplacement 让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快。
• 使用 OneOf 让资源文件一旦被某个 loader 处理了，就不会继续遍历了，打包速度更快。
• 使用 Include/Exclude 排除或只检测某些文件，处理的文件更少，速度更快。
• 使用 Cache 对 eslint 和 babel 处理的结果进行缓存，让第二次打包速度更快。
• 使用 Thead 多进程处理 eslint 和 babel 任务，速度更快。（需要注意的是，进程启动通信都有开销的，要在比较多代码处理时使用才有效果）

1. 减少代码体积

• 使用 Tree Shaking 剔除了没有使用的多余代码，让代码体积更小。
• 使用 @babel/plugin-transform-runtime 插件对 babel 进行处理，让辅助代码从中引入，而不是每个文件都生成辅助代码，从而体积更小。
• 使用 Image Minimizer 对项目中图片进行压缩，体积更小，请求速度更快。（需要注意的是，如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。）

1. 优化代码运行性能

• 使用 Code Split 对代码进行分割成多个 js 文件，从而使单个文件体积更小，并行加载 js 速度更快。并通过 import 动态导入语法进行按需加载，从而达到需要使用时才加载该资源，不用时不加载资源。
• 使用 Preload / Prefetch 对代码进行提前加载，等未来需要使用时就能直接使用，从而用户体验更好。
• 使用 Network Cache 能对输出资源文件进行更好的命名，将来好做缓存，从而用户体验更好。
• 使用 Core-js 对 js 进行兼容性处理，让我们代码能运行在低版本浏览器。
• 使用 PWA 能让代码离线也能访问，从而提升用户体验。