高级配置

高级配置就是进行Webpack优化,让代码在编译/运行时性能更好.

提升开发体验

为什么

浏览器提示代码的错误的位置是构建后的代码,不方便开发.

是什么

SourceMap(源代码映射)是一个用来生成源代码与构建后代码意义映射的文件的方案.

它会生成一个xxx.map文件,当构建后代码出错了,会通过这个文件从构建代码出错的位置找到映射后源代码出错的位置,从而让浏览器提示源代码文件出错的位置,帮助程序员快速会遭到错误根源.

怎么没用

配置

提升打包构建速度

项目体积大,打包速度就很慢,所以需要使用各种手段提升打包构建速度.

HotModuleRepalcement

热模块替换/热替换

为什么

开发时修改其中一个模块的代码,Webpack默认会将所有模块全部重新打包编译,速度很慢.

所以需要做到修改了某个模块的代码,就只打包修改代码的模块,其他模块不变,一次提高速度.

适用场景:只能用在开发模式,生产模式下必须全部重新打包,

是什么

HotModuleRepalcement(HMR/热替换模块)

在程序运行中,替换/添加/删除讴歌模块,而无需加载刷新整个页面.

怎么用

在webpack5默认开启

配置工具

devServer:{
    hot:true // 开启HMR
}

css样式style-loader直接支持热替换

开启这个功能后,js也可能会全部重新加载而不是热替换,js想使用热替换,需要在入口js里面设置以下在开发中实际不写

if(module.hot){
    // 判断是否支持热模块功能
    module.hot.accept(js模块名1)
    ...
    module.hot.accept(js模块名2)
    
}

上面js的方式如果有100个模块就很复杂,所以在以后的开发中使用项目的loader如vue-laoder,react-hot-loader这两个loader提供热替换工鞥

Oneof

为什么

打包时每个文件都会经过所有 loader 处理，所有loader都要过一遍，速度比较慢.

是什么

只匹配一个loader,其他不匹配了

怎么用

使用场景:开发模式和生产模式都要有

配置

module: {
    rules: [
      {
        // 重点:使用oneOf的数组包裹执勤啊的内容
        oneOf: [
          {
            test: /\.css$/,
            use: ["style-loader", "css-loader"],
          },
           // ...略
          {
            test: /\.js$/,
            loader: "babel-loader",
          },
        ],
         
      },
    ],
  },

include/Excluede

为什么

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

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

是什么

二者只能写一个

include 包含，只处理 xxx 文件
exclude 排除，除了 xxx 文件以外其他文件都处理

怎么用

使用场景:开发模式和生产模式都要有

配置:

在module下的js处配置

 {
    test: /\.js$/,
    // 1.排除node_modules下的文件，其他文件都处理
    // exclude: /node_modules/, 
          
    // 2.只处理src下的文件，其他文件不处理
    include: path.resolve(__dirname, "../src"), 
       
 }

建议选择第一种

只针对第三方js文件排除或包含,而样式文件不考虑这个问题.

Cache缓存

为什么

开发时js文件占的比重比较大,而js打包每次都要经过 Eslint 检查和 Babel 编译，速度比较慢.所以可以缓存之前的 Eslint 检查和 Babel 编译结果,==下一次打包时==:

对于未修改的js文件,使用缓存结果
对于修改的js文件,重新打包

是什么

对 js文件的Eslint 检查和 Babel 编译结果进行缓存。

怎么用

场景:开发模式和生产模式

配置:

// 开发模式
// 在module下的js处配置
{
    test: /\.js$/,
    use: [
      {
        loader: "babel-loader",
        options: {
          // 重点:缓存bable的结果
          cacheDirectory: true,    // 开启babel缓存
          cacheCompression: false, // 关闭缓存文件压缩
        },
      },
    ],
  },
        
// 在插件plugin下配置,缓存ESlint的结果
new ESLintPlugin({  
  // 重点:开启缓存
  cache: true, 
  // 重点:缓存路径
  cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslintcache"),
}) 

缓存的结果存储的node_modules的.cache的目录下

Thead多进程

为什么

问题:当项目越来越庞大时，打包速度越来越慢.
目标:继续提升打包速度，其实就是==提升 js 的打包速度==，因为其他文件都比较少。

而对 js 文件处理主要就是 ==eslint 、babel、Terser== (压缩插件,看不见)三个工具，所以要提升它们的运行速度。
方法:开启==多进程同时处理 js 文件==，这样速度就比之前的单进程打包更快了。

是什么

多进程打包:开启电脑的多个进程同时干一件事,速度更快

注意:

请仅在特别好使的操作中使用,因为每个进程启动就有大约600ms左右的开销.

怎么用

获取CPU核数

能启动的进程的最大数量就是CPU的核数

// nodejs核心模块，直接使用
const os = require("os");
// cpu核数
const threads = os.cpus().length;

下载包
```
npm i thread-loader -D
```

修改配置

// 获得核数
const os = require("os");
const threads = os.cpus().length; // cpu核数

// 生产模式
// module模块下
{
    test: /\.js$/,
    exclude: /node_modules/, 
    use: [
      {
         // 开启多进程 
        loader: "thread-loader",  
        options: {
          works: threads, // 进程数量
        },
  ]
}  

// 针对ESLint的多线程
new ESLintPlugin({
      // 略
      threads, // 开启多进程和设置进程数量
})   

// 针对terser压缩的缓存
const TerserWebpackPlugin = require("terser-webpack-plugin");
optimization: {
    // 压缩的操作
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserWebpackPlugin({
        parallel: threads, // 开启多进程和设置进程数量
      }),
    ]
}

减少代码体积

Tree Shaking

webpack已经默认开启了这个功能。

优化代码运行性能

Babel

将babel添加的辅助代码作为一个独立模块，来避免重复引入。

Image Minimizer

压缩图片

优化代码运行性能

code spilt

提取重复代码

适用多入口文件

按需加载，动态导入

Preload / Prefetch

Core-js

它能将 ES6 的一些语法进行编译转换，比如箭头函数、点点点运算符等。但是如果是 async 函数、promise 对象、数组的一些方法（includes）等，它没办法处理。 core-js 是专门用来做 ES6 以及以上 API 的 polyfill

PWA

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

Webpack高级配置

高级配置

提升开发体验

为什么

是什么

怎么没用

提升打包构建速度

HotModuleRepalcement

为什么

是什么

怎么用

Oneof

为什么

是什么

怎么用

include/Excluede

为什么

是什么

怎么用

Cache缓存

为什么

是什么

怎么用

Thead多进程

为什么

是什么

怎么用

减少代码体积

Tree Shaking

优化代码运行性能

Babel

Image Minimizer

优化代码运行性能

code spilt

提取重复代码

按需加载，动态导入

Preload / Prefetch

Core-js

PWA