Loader 用于对特定的模块进行加载和转换;Plugin 可以贯穿 Webpack 的整个生命周期,用于执行更广泛的任务,比如打包优化、资源管理、环境注入等。
CleanWebpackPlugin 插件:
运行 webpack
命令进行打包,最终会生成一个文件夹。当修改了代码重新进行打包后:
- 如果生成的文件在输出的文件夹下已有同名的文件,Webpack 会进行覆盖。
- 如果生成的文件是新的文件,Webpack 会将其添加到输出的文件夹下。
- 如果输出的文件夹下有旧的文件,但是并没有生成的新的同名的文件,Webpack 会对其进行保留,不会删除。
因此,之前都是每次运行 webpack
命令进行打包之前,手动删除打包输出的文件。可以使用 CleanWebpackPlugin 插件来解决。
使用 CleanWebpackPlugin 插件:
CleanWebpackPlugin 插件:在打包之前自动删除之前打包输出的文件。
- 安装 CleanWebpackPlugin 插件:
npm install clean-webpack-plugin --save-dev
。 - 在 Webpack 配置文件中进行配置。
const path = require('path') // 导入 CleanWebpackPlugin const {CleanWebpackPlugin} = require('clean-webpack-plugin') module.exports = { // 必须明确配置 output.path,否则 CleanWebpackPlugin 会找不到要清除输出文件夹的地方 output: { path: path.resolve(__dirname, 'dist'), }, plugins: [ // 使用 CleanWebpackPlugin。Plugin 都是一个一个的类 new CleanWebpackPlugin() ] }
HtmlWebpackPlugin 插件:
之前是手动创建了一个 HTML 文件,并手动将打包后的 JS 文件引入了进去。可以使用 HtmlWebpackPlugin 插件来自动生成 HTML 文件。
使用 HtmlWebpackPlugin 插件:
HtmlWebpackPlugin 插件:在打包后生成的文件下自动生成一个 HTML 文件,并将打包后的资源自动引入。
HtmlWebpackPlugin 插件底层是根据 ejs 模板来生成 HTML 文件的。
- 安装 HtmlWebpackPlugin 插件:
npm install html-webpack-plugin --save-dev
。 - 在
webpack.config.js
配置文件中进行配置。// 导入 HtmlWebpackPlugin const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { plugins: [ // 使用 HtmlWebpackPlugin new HtmlWebpackPlugin() ] }
运行 webpack
命令进行打包,会发现,在打包生成的文件夹下自动生成的 index.html
文件。
配置 HtmlWebpackPlugin 插件自动生成的 HTML 文件的 <title>
标签的值:
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new HtmlWebpackPlugin({
// 配置使用 HtmlWebpackPlugin 插件自动生成的 HTML 文件的 <title> 标签的值。默认是 Webpack App
title: '测试',
})
]
}
运行 webpack
命令进行打包,会发现,在打包生成的文件夹下自动生成的 index.html
文件中 <title>
标签的值变为了测试。
配置 HtmlWebpackPlugin 插件根据自定义 HTML 模板来生成 HTML 文件:
- 新建
public/index.html
文件并编写代码。 - 在
webpack.config.js
配置文件中进行配置。const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { plugins: [ new HtmlWebpackPlugin({ // HtmlWebpackPlugin 插件将会根据 template 属性指定的 HTML 文件生成打包后的 HTML 文件 template: './public/index.html' }) ] }
运行 webpack
命令进行打包,会发现,HtmlWebpackPlugin 插件根据 public/index.html
在打包生成的文件夹下自动生成的 index.html
文件。
DefinePlugin 插件:
DefinePlugin 是 Webpack 内置的一个插件,不需要单独安装。允许在 Webpack 编译时创建全局常量,就可以在项目中全局使用。
- 在
webpack.config.js
配置文件中进行配置。// 导入 DefinePlugin const {DefinePlugin} = require('webpack') module.exports = { plugins: [ // 使用 DefinePlugin new DefinePlugin({ // 定义全局常量 ENV // 由于 DefinePlugin 插件直接执行文本替换,给定的值必须包含字符串本身的引号,否则的话替换后就会成为变量名而非字符串值。因此,可以使用 '"production"' 或者 JSON.stringify('production') // ENV: '"production"', ENV: JSON.stringify('production') }) ] }
- 在
src/js/component.js
中编写以下代码。// 使用全局常量 ENV console.log(ENV)
运行 webpack
命令进行打包,打开浏览器,可以看到有 ENV 的打印信息。
CopyWebpackPlugin 插件:
在 public 文件夹下新增 favicon.png
图片。 运行 webpack
命令进行打包,想要实现的效果是,将 pubilc 文件夹下除了 index.html
文件外的其他内容全部复制到 Webpack 打包生成的文件夹下。
使用 CopyWebpackPlugin 插件:
CopyWebpackPlugin 插件:用于复制文件和目录。
- 安装 CopyWebpackPlugin 插件:
npm install copy-webpack-plugin --save-dev
。 - 在
webpack.config.js
配置文件进行配置。const path = require('path') // 导入 CopyWebpackPlugin const CopyWebpackPlugin = require('copy-webpack-plugin') module.exports = { plugins: [ // 使用 CopyWebpackPlugin new CopyWebpackPlugin({ // 匹配要复制的资源,复制到哪个地方。patterns 是一个数组,可以匹配多个对象 patterns: [ { // 要复制资源的位置 from: 'public', // 复制到哪个地方。如果 to 的属性值是相对路径,将会相对于 Webpack 打包生成的目录;如果是绝对路径,将直接使用指定的路口;如果不明确设置 to 属性,将默认复制到 Webpack 打包生成的目录 下 to: path.resolve(__dirname, 'dist'), globOptions: { // 复制时要忽略的文件。前面必须加 **/,否则将会忽略失败 ignore: [ '**/index.html' ] } } ] }) ] }
运行 webpack
命令进行打包,会发现, public 文件夹下除了 index.html
文件外的其他内容已经全部复制到 Webpack 打包生成的文件夹下了。
ProvidePlugin 插件:
例如:现在项目中依赖一个第三方库,这个第三方库本身又依赖 lodash,但是它默认全局已经存在了 lodash,因此没有对 lodash 进行导入,那么运行起来就会报错,此时就需要通过 ProvidePlugin 来实现 shimming 效果。
shimming:垫片。是某一类功能的统称,给代码填充一些垫片来处理一些问题。
Webpack 官方并不推荐随意使用 shimming,因为 Webpack 的理念是编写具有封闭性的、不存在隐含依赖的、彼此隔离的模块,从而使前端开发更加模块化,但是 shimming 会使得模块的依赖关系不明确。
使用 ProvidePlugin 插件:
ProvidePlugin:是 Webpack 内置的一个插件。用于当在代码中找不到某一个变量时,自动导入对应的库。可以传入一个对象,其中的 key 是在代码中使用的库的名称,value 是要自动导入的库的名称。
- 安装 lodash。
- 新建
src/index.js
,并编写代码。// 使用了 ldash,但是并没有引入 console.log(_.join(['a', 'b', 'c'], '/'))
- 在
webpack.config.js
进行配置。const webpack = require('webpack') module.exports = { plugins: [ // 当在代码中找不到变量 _ 时,会自动引入 lodash 库 new webpack.ProvidePlugin({ _: 'lodash' }) ] }
- 新建
index.html
,并编写代码。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="./dist/main.js"></script> </body> </html>
- 运行
webpack
命令进行打包,并在浏览器中运行,会发现可以正常运行。