谈谈plugins，然后使用两个基本的plugins，一个是clean-webpack-plugin，一个是HtmlWebpackPlugin。
git仓库：webpack-demo
1、plugins初识
-
什么是
webpack的plugins？首先回顾一下前面几章讲webpack的loaders相关概念时，我将它理解为一个赋能的概念，各种各样的loader为webpack提供了处理不同文件的能力，使webpack变得更强大了。 -
而
webpack的plugins，则可以把它理解为类似于框架的生命周期(钩子/函数)，比如可以在页面mounted的时候做些事情、在页面show的时候做些事情，离开页面destroyed的时候做些事情等等。同理，plugins也可以让我们在webpack打包过程中的不同阶段来做些事情。 -
大概感觉就是这么个感觉，具体我们实践出真章。
2、过程回顾
-
首先我们回顾下我们打包or重新打包的一个大体的过程啊：
- ①我们先会手动删除掉
dist文件夹，避免再次打包有冗余重复的js文件； - ②复制一份
src/index.html到dist目录下； - ③
npm run build打包； - ④假设打包后输出的文件为
main.bundle.js，那么则将此文件在dist/index.html中手动引入； - ⑤打包完成，
dist文件更新完成。
- ①我们先会手动删除掉
-
接下来呢，我们就利用插件解决上面手动化的处理过程。复制一份chapter7的文件改名为
chapter8。
3、CleanWebpackPlugin
- 首先我们来解决上文中的第①个步骤，使用
CleanWebpackPlugin这个插件可以帮我们实现这个功能，他会自动帮我们删除dist文件，安装：
$ npm install clean-webpack-plugin --save-dev
- 在
webpack.config.js中引入并配置它。
+ const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const path = require("path");
module.exports = {
mode: "development",
devtool: "inline-source-map",
entry: {
main: "./src/index.js"
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
},
+ plugins: [
+ new CleanWebpackPlugin()
+ ],
...
}
- 当我们重新打包的时候，这个插件就会帮我们把
dist文件，在webpack中使用一个插件就是这么简单。
4、HtmlWebpackPlugin
- 首先，我们安装这个插件，并试着使用它。安装：
$ npm install html-webpack-plugin --save-dev
- 在webpack.config.js中配置添加一下：
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+ const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
mode: "development",
devtool: "inline-source-map",
entry: {
main: "./src/index.js"
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
},
plugins: [
new CleanWebpackPlugin(),
+ // 可以为你生成一个HTML文件
+ new HtmlWebpackPlugin()
],
...
}
- 当我们这么简单的添加一行后，开始打包，这个插件会为我们做两件事情：
- 在
dist目录下生成一个index.html文件； - 自动帮我们引入
main.bundle.js文件;
- 在
5、小进阶
- 这个
html-webpack-plugin插件还有一些的基本的常见配置，我们可传个对象给它配置些东西。- 设置这个
template就是说，打包后我不要它自动给我生成一个html文件，我指定一个模板，你照着这个模板把main.bundle.js文件引入就行。 - 设置
title就是测试一下，<%= htmlWebpackPlugin.options %>可以读取htmlWebpackPlugin中定义的配置参数。 - 这是两个比较常见的设置场景。
- 设置这个
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+ const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
...
plugins: [
new CleanWebpackPlugin(),
// 可以为你生成一个HTML文件
new HtmlWebpackPlugin({
+ title: "webpack从0到1",
+ template: "./index.html"
})
],
...
}
- 修改一下我们许久未动的
chapter8/index.html文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
- <title>webpack从0到1</title>
+ <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
- <script src="./src/index.js"></script>
</body>
</html>
- 打包后，我们就可以看到新的
dist/index.html文件自动生成了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack从0到1</title>
</head>
<body>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
小结
- 当我们每次重新打包，如果有新的文件输出，那么就会直接添加到dist文件夹下，循环往复下去，我们的dist目录就会变得很混乱，所以，我们需要在每次重新打包前把dist目录手动删除一下，
clean-webpack-plugin这个插件就是来帮我们做这个事情的。 -
html-webpack-plugin可以帮我们自动生成一个html文件，也可以指定一个html文件为模板，自动引入打包后的文件等等。 - 其实，如果我们自己去写一个plugin就会知道，里面的内容就是利用了
webpack提供的事件钩子，当打包进行某个阶段的时候做了些相应的事情，做完了就callback回调一下而已。 - 上文过程回顾中的几点步骤，我们基本靠这两个插件解决了，但是第三步每次修改文件内容后都需要重新
npm run build打包一下这个很烦，下节我们用webpack-dev-server这个插件来解决这个问题。
参考链接：
webpack-html-webpack-plugin
html-webpack-plugin
output-management
网友评论