谈谈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
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这个插件来解决这个问题。