谈谈plugins,然后使用两个基本的plugins,一个是clean-webpack-plugin,一个是HtmlWebpackPlugin。 git仓库:webpack-demo
webpack
的plugins?首先回顾一下前面几章讲webpack
的loaders
相关概念时,我将它理解为一个赋能的概念,各种各样的loader
为webpack
提供了处理不同文件的能力,使webpack
变得更强大了。webpack
的plugins
,则可以把它理解为类似于框架的生命周期(钩子/函数),比如可以在页面mounted
的时候做些事情、在页面show
的时候做些事情,离开页面destroyed
的时候做些事情等等。同理,plugins
也可以让我们在webpack
打包过程中的不同阶段来做些事情。dist
文件夹,避免再次打包有冗余重复的js文件;src/index.html
到dist
目录下;npm run build
打包;main.bundle.js
,那么则将此文件在dist/index.html
中手动引入;dist
文件更新完成。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
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
文件。<!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>
clean-webpack-plugin
这个插件就是来帮我们做这个事情的。html-webpack-plugin
可以帮我们自动生成一个html文件,也可以指定一个html文件为模板,自动引入打包后的文件等等。webpack
提供的事件钩子,当打包进行某个阶段的时候做了些相应的事情,做完了就callback
回调一下而已。npm run build
打包一下这个很烦,下节我们用webpack-dev-server这个插件来解决这个问题。参考链接: webpack-html-webpack-plugin html-webpack-plugin output-management