关于webpack:webpack5优化的地方及搭建的一些体会

前言

在从 Webpack4 到Webpack5的降级过程中，即便以前曾经搭建过 Webpack4，然而搭建Webpack5 的过程中还是有点苦楚。因为 Webpack 提供的性能办法切实是太多了，很宏大的一个体系，所以搭建完感触还是很多的，发现不能一味的从网上找，还是得看文档 。
看完文档才发现原来 Webpack5 外面曾经精简了很多插件了，不须要额定装置其余插件，很多以前概念比拟含糊的货色，看了文档还是比拟清晰的。大家有趣味的话能够 Fork 我的 webpack5-boilerplate 学习交换，倡议大家多敲敲多试试，过程尽管有点苦楚，然而肯定会有播种的。
本文解说，须要肯定 Webpack4 根底，还没有搭建过 Webpack4 的同学，能够看看这篇 Webpack4 搭建
上面的解说，都基于 webpack5-boilerplate 这个我的项目。

Webpack大体框架

首先咱们对 Webpack 得有一个大体的框架意识

// webpack.config.js
module.exports = {
    // 入口
    entry: {},

    // 打包输入
    output: {},

    // 配置模块如何解析
    resolve: {},

    // 配置各种 loader
    moudle: {},

    // 配置插件
    plugins: [],

    // 优化（能够进行代码宰割）optimization: {},

    // webpack-dev-server 开发时的配置，个别用于 development 模式
    devServer: {}};

所须要的Loader

CSS类的Loader

• css-loader
• css-minimizer-webpack-plugin
• mini-css-extract-plugin
• less-loader
• less
• style-loader
• …

目前我临时用到的就这些

解析 ES6 类的Loader

• @babel/core
• @babel/plugin-transform-runtime
• @babel/preset-env
• babel-loader
• core-js

解析 Html 类的Loader

• html-webpack-plugin

Webpack5不须要用到的依赖

• url-loader
• file-loader
• clean-webpack-plugin
• @babel/polyfill
• @babel/runtime
• optimize-css-assets-webpack-plugin

最初依赖列表预览

"devDependencies": {
    "@babel/core": "^7.16.12",
    "@babel/plugin-transform-runtime": "^7.16.10",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.1",
    "css-minimizer-webpack-plugin": "^3.4.1",
    "filemanager-webpack-plugin": "^6.1.7",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "mini-css-extract-plugin": "^2.5.3",
    "style-loader": "^3.3.1",
    "webpack": "^5.67.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.3",
    "webpack-merge": "^5.8.0"
},
"dependencies": {"core-js": "^3.20.3"},

webpack5-boilerplate这个脚手架，外围的就这些依赖，另外须要的依赖再本人装就好了。是不是感觉依赖少了很多，我是登时感觉很难受。接下来讲一下这些不须要用到的插件，如何在 Webpack5 外面用别的形式代替。

应用 Asset Module 模块，来治理资源

官网解释：资源模块 (asset module) 是一种模块类型，它容许应用资源文件（字体，图标等）而无需配置额定 loader。

以编译图片为例，所以如果咱们要编译图片：

const 
maxSize = 10 * 1024,
outImageFileName = 'img/',
proResFileName = 'assets/';

/**
 * @maxSize 如果图片小于 10Kb，会被转为 base64
 * @outImageFileName 要导出到哪个文件夹，如果写在 filename 配置外面，则会导出到这个文件夹上
 * @proResFileName outputPath 指的也是把该资源寄存到 proResFileName 文件夹下
 */
module: {
    rules: [
        {test: /\.(png|svg|jpg|jpeg|gif)$/i,
            type: 'asset',
            // 设置图片导出大小，如果小于预设的值，则会被转化成 base64
            parser: {
                dataUrlCondition: {maxSize}
            },

            // 设置导出的门路为 img
            generator: {filename: `${outImageFileName}[name]-[hash:2][ext][query]`,
                outputPath: proResFileName
            }
        },
    ]
}

参考文章：

• Webpack资源模块
• 模块

应用 output 外面配置，在生成文件之前清空 output 目录的内容

这样咱们就能够不须要装置 clean-webpack-plugin 这个插件了

output: {clean: true};

参考文章：

• output.clean

应用 mini-css-extract-plugin 插件来压缩 css 代码

// Webpack5 压缩配置
optimization: {
    minimizer: [
        // 压缩 css
        new CssMinimizerPlugin(),

        // '...' 来拜访默认值。（不加的话，js 不会压缩）'...'
    ],
},

// Webpack4 压缩配置
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

plugins: [
    // 压缩 css
    new OptimizeCssAssetsPlugin({
        assetNameRegExp: /\.css$/g,
        cssProcessor: require('cssnano'), // 用于优化 \ 最小化 CSS 的 CSS 处理器，默认为 cssnano
        cssProcessorOptions: {safe: true, discardComments: { removeAll: true} }, // 传递给 cssProcessor 的选项，默认为{}
        canPrint: true // 布尔值，批示插件是否能够将音讯打印到控制台，默认为 true
    }),
]

Webpack5压缩 css 的配置对比起 Webpack4 的更加简略。

参考文章：

• CssMinimizerWebpackPlugin

Babel依赖配置

• @babel/polyfill在 Babel 7.4.0 就被弃用了。所以不必在装置 @babel/polyfill 这个插件了
• Babel是一个集体感觉蛮简单的体系，大家能够好好浏览上面这几篇文章，读多几遍好好了解一下

参考文章：

• Babel
• Webpack4搭建
• babel 在 webpack 中应用和配置

对于 devServer 配置的了解

我想大家最懵圈的应该就是 devServer.static（Webpack5 是static，Webpack4是 contentBase）这个配置了吧。是不是始终感觉，如果把外面的门路配置指向了咱们打包进去的文件夹名字（dist），而后开启了webpack-dev-server 服务器，就是拜访的咱们打包的那个资源（dist），其实并不是。这里大家能够本人建一个最简略的demo，而后配置改成上面这样：

output: {path: path.resolve(__dirname, `build`),
},
devServer: {
    static: {directory: path.resolve(__dirname, `outDir`),
    },
}

此时打包进去的文件夹是 build，然而咱们开启服务器拜访的时候，拜访是outDir 文件夹，后果页面显示的还是咱们的开发的 index.html 的内容，这就阐明 devServer.static 的配置，基本就不是管制开启了 webpack-dev-server 服务器后拜访的文件目录。这是通过自己测试，剖析后的集体了解。

devServer.static，实际上指的是：一个寄存，不通过 Webpack 编译的动态资源目录，他是一个目录 。它的性能就很像是vue-cli 外面的 public 文件夹，咱们开发的时候，能够通过 ./ 或者 ../ 拜访到那个资源（具体看目录关系）。

怎么拜访到 devServer.static.directory 外面的文件

首先，咱们先分明这几点：

1. 开启 webpack-dev-server 服务器时，以 webpack5-boilerplate 为例，咱们的代码会依据咱们的配置，在内存中生成一个打包文件，保留在内存中的打包文件目录构造：

   (http://localhost:8080/)
   ├── js
   ├── img
   ├── font
   ├── media
   ├── favicon.ico
   ├── index.html
   └── share.html

2. 开启 webpack-dev-server 服务器时，devServer.static.directory外面的文件会间接被映射到根目录下
3. devServer.static.directory，默认指向的是 public 文件夹。

OK，咱们在根目录下新建一个 public 的文件夹，外面放一个 test.txt 文件。开启webpack-dev-server，关上http://localhost:8080/test.txt，咱们就能够拜访到这个不经打包的动态资源了。此时保留在内存中的文件目录构造就变成了：

(http://localhost:8080/)
├── js
├── img
├── font
├── media
├── favicon.ico
├── test.txt（间接被映射到根目录下）├── index.html
└── share.html

所以想要拜访 devServer.static.directory 的内容就是：http://localhost:8080/（文件名字）。

留神：
如果在 public 外面新建一个 index.html，拜访http://localhost:8080/index.html 或者 http://localhost:8080/ 时，内容是咱们的开发的 index.html 模板，这是因为咱们的配置把编译后的 index.html 输入在 dist 文件夹根目录了，此时笼罩掉了 public/index.html(能够在插件HtmlWebpackPlugin，把输的filename，设置为filename: index2.html，在public 下新建一个 index.html，此时拜访http://localhost:8080/ 就是 public 外面的 index.html)
所以咱们在 public 文件夹外面，要防止与被编译的文件同名，否则会被笼罩掉。

对于 devServer.devMiddleware.publicPath 配置阐明

devServer.devMiddleware.publicPath对应的是 Webpack4 外面的 devServer.publicPath，以下简称publicPath。
在没有配置 publicPath 的时候，咱们开启 webpack-dev-server，拜访http://localhost:8080/ 失去的是笼罩掉 public/index.html 的编译后的模板 index.html。因为publicPath 默认值是：''指向根目录，所以咱们拜访 http://localhost:8080/ 就是根目录，不必在前面加门路。
然而如果咱们想相似以下拜访咱们的开发页面：http://localhost:8080/test/，咱们只有将配置设置成：

output: {publicPath: '/test/',},
devServer: {
    /**
     * 示意打包生成的动态文件所在的地位，意思是 url 拜访的门路
     * 扭转 dist 拜访的门路，outpath 须要跟他统一，启动拜访的 url 为 http://localhost:8080/test/index.html
     */
    devMiddleware: {publicPath: '/test/',},
}

此时咱们拜访的开发页面的门路就是：http://localhost:8080/test/

留神：output.publicPath与 devServer.devMiddleware.publicPath 要始终保持统一，不然会有问题