Plugins
扩展 webpack 本身的一些功能,它们会运行在各种模块解析完成以后的打包编译阶段,比如对解析后的模块文件进行压缩等 。
1. html-webpack-plugin
在打包结束后,自动生成一个 html 文件,并把打包生成的 js 模块引入到该 html 中 。
官网:https://www.webpackjs.com/plugins/html-webpack-plugin/
安装:
$ yarn add html-webpack-plugin -D
OR
npm install --save-dev html-webpack-plugin
在webpack.config.js中使用:
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
...,
//=>在webpack中使用插件
plugins: [
new HtmlWebpackPlugin({
//=>指定自己的模板
//=> 指定生成 html 的模版文件(如果不指定,则会生成一个默认的不附带其它内容的 html 文件)
template: './src/index.html',
//=>输出的文件名
filename: 'index.html',
//=>给引入的文件设置HASH戳(清除缓存的),也可以在output中设置 filename: 'bundle.min.[hash].js' 来生成不同的文件
hash: true,
//=>控制是否以及以何种方式最小化输出
//=>https://github.com/kangax/html-minifier
minify: {
collapseWhitespace: true,
removeComments: true,
removeAttributeQuotes: true,
removeEmptyAttributes: true
}
})
]
}
在 html 模板中,可以通过 <%=htmlWebpackPlugin.options.XXX%> 的方式获取配置的值 :
new HtmlWebpackPlugin({
title:"My App",
...
})
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%=htmlWebpackPlugin.options.title%></title>
</head>
2. clean-webpack-plugin
删除(清理)构建目录
yarn:https://classic.yarnpkg.com/zh-Hans/package/clean-webpack-plugin
npm:https://www.npmjs.com/package/clean-webpack-plugin
安装:
yarn add clean-webpack-plugin -D
OR
npm i clean-webpack-plugin -D
// webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
plugins: [new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, 'dist')]
// 若不配置,默认删除 output 下 path 指定的目录
})]
}