1、plugins初识谈谈plugins，然后使用两个基本的plugins，一个是clean-webpack-plugin，一个是HtmlWebpackPlugin。
git仓库：webpack-demo
-
什么是webpack的plugins？首先回顾一下前面几章讲webpack的loaders相关概念时，我将它理解为一个赋能的概念，各种各样的loader为webpack提供了处理不同文件的能力，使webpack变得更强大了。
-
而webpack的plugins，则可以把它理解为类似于框架的生命周期(钩子/函数)，比如可以在页面mounted的时候做些事情、在页面show的时候做些事情，离开页面destroyed的时候做些事情等等。同理，plugins也可以让我们在webpack打包过程中的不同阶段来做些事情。
-
大概感觉就是这么个感觉，具体我们实践出真章。
-
首先我们回顾下我们打包or重新打包的一个大体的过程啊：
- ①我们先会手动删除掉dist文件夹，避免再次打包有冗余重复的js文件；
- ②复制一份src/index.html到dist目录下；
- ③npm run build打包；
- ④假设打包后输出的文件为main.bundle.js，那么则将此文件在dist/index.html中手动引入；
- ⑤打包完成，dist文件更新完成。
-
接下来呢，我们就利用插件解决上面手动化的处理过程。复制一份chapter7的文件改名为chapter8。
- 首先我们来解决上文中的第①个步骤，使用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中使用一个插件就是这么简单。
- 首先，我们安装这个插件，并试着使用它。安装：
$ 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文件;
- 这个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文件。
- webpack从0到1
+ <%= htmlWebpackPlugin.options.title %>
-
- 打包后，我们就可以看到新的dist/index.html文件自动生成了：
webpack从0到1
- 当我们每次重新打包，如果有新的文件输出，那么就会直接添加到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
