Webpack常见的插件和模式

认识Plugin

Webpack的另一个核心是Plugin，官方有这样一段对Plugin的描述：

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

上面表达的含义翻译过来就是：

Loader是用于特定的模块类型进行转换；Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等

CleanWebpackPlugin

前面我们演示的过程中，每次修改了一些配置，重新打包时，都需要手动删除dist文件夹：

我们可以借助于一个插件来帮助我们完成，这个插件就是CleanWebpackPlugin；

首先，我们先安装这个插件：

npm install clean-webpack-plugin -D

之后在插件中配置：

HtmlWebpackPlugin

另外还有一个不太规范的地方：

我们的HTML文件是编写在根目录下的，而最终打包的dist文件夹中是没有index.html文件的。在进行项目部署的时，必然也是需要有对应的入口文件index.html；所以我们也需要对index.html进行打包处理；

对HTML进行打包处理我们可以使用另外一个插件：HtmlWebpackPlugin；

npm install html-webpack-plugin -D

生成index.html分析

我们会发现，现在自动在dist文件夹中，生成了一个index.html的文件：

该文件中也自动添加了我们打包的bundle.js文件；

这个文件是如何生成的呢？

默认情况下是根据ejs的一个模板来生成的；在html-webpack-plugin的源码中，有一个default_index.ejs模块；自定义HTML模板

如果我们想在自己的模块中加入一些比较特别的内容：

比如添加一个noscript标签，在用户的JavaScript被关闭时，给予响应的提示；比如在开发vue或者react项目时，我们需要一个可以挂载后续组件的根标签 ；

这个我们需要一个属于自己的index.html模块：

自定义模板数据填充

上面的代码中，会有一些类似这样的语法，这个是EJS模块填充数据的方式。

在配置HtmlWebpackPlugin时，我们可以添加如下配置：

template：指定我们要使用的模块所在的路径；title：在进行htmlWebpackPlugin.options.title读取时，就会读到该信息；

DefinePlugin的介绍

但是，这个时候编译还是会报错，因为在我们的模块中还使用到一个BASE_URL的常量：

这是因为在编译template模块时，有一个BASE_URL：

；但是我们并没有设置过这个常量值，所以会出现没有定义的错误；

这个时候我们可以使用DefinePlugin插件；

DefinePlugin的使用

DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）：

这个时候，编译template就可以正确的编译了，会读取到BASE_URL的值；

Mode配置

前面我们一直没有讲mode。

Mode配置选项，可以告知webpack使用相应模式的内置优化：

默认值是production（什么都不设置的情况下）；可选值有：‘none’ | ‘development’ | ‘production’；

这几个选项有什么样的区别呢？

Mode配置代表更多

const path = require(“path”);const { VueLoaderPlugin } = require(“vue-loader/dist/index”);const { CleanWebpackPlugin } = require(“clean-webpack-plugin”);const HtmlWebpackPlugin = require(“html-webpack-plugin”);const { DefinePlugin } = require(“webpack”);module.exports = { mode: “production”, entry: “./src/main.js”, output: { filename: “bundle.js”, path: path.resolve(__dirname, “./build”), // assetModuleFilename: “abc.png”, }, resolve: { extensions: [“.js”, “.jsx”, “.json”, “.vue”, “.ts”, “.tsx”, “.wasm”], alias: { utils: path.resolve(__dirname, “./src/utils”), }, }, module: { rules: [ { // 告诉webpack匹配什么文件 test: /\.css$/, /* use: [ // use 中多个loader的使用顺序是从后往前的 { loader: “style-loader” }, { loader: “css-loader” }, ], */ // 简写: 如果只有一个loader // loader: “css-loader”, // 简写二: 多个loader不需要其他属性时 use: [ “style-loader”, “css-loader”, “postcss-loader”, /* { loader: “postcss-loader”, options: { postcssOptions: { plugins: [“autoprefixer”], }, }, }, */ ], }, { test: /\.less$/, use: [“style-loader”, “css-loader”, “less-loader”, “postcss-loader”], }, { test: /\.(png|jpg|svg|gif|jpeg)$/, // 1.打包两张图片,并且这两张图片有自己的地址,将地址设置到 img/bg:url中 // 缺点: 多图片加载的两次网络请求 // type: “asset/resource”, // 2.将图片进行base64的编码,将编码后的源码放在js打包后的代码中 // 缺点:造成js文件体积变大,导致浏览器下载/解析js文件本身消耗时间变长 // type: “asset/inline”, // 3.合理的规范: // 3.1 对于小一点的图片,可以进行base64编码 // 3.2 对于大一点的图片,单独的图片打包,形成url地址 type: “asset”, parser: { dataUrlCondition: { maxSize: 80 * 1024, }, }, generator: { // 占位符 // name: 原来的图片名称 // ext: 扩展名 // hash: webpack生成的hash filename: “img/[name]_[hash][ext]”, }, }, { test: /\.js$/, use: [ { loader: “babel-loader”, /* options: { plugins: [“@babel/plugin-transform-arrow-functions”], }, */ }, ], }, { test: /\.vue$/, use: [ { loader: “vue-loader”, }, ], }, ], }, plugins: [ new VueLoaderPlugin(), new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: “demo项目”, template: “./index.html”, }), new DefinePlugin({ BASE_URL: “‘./'”, coderF: “‘what'”, counter: “‘123′”, }), ],};

Q.E.D.