8、webpack从0到1-基本的plugins
谈谈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
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 8、webpack从0到1-基本的plugins
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 8、webpack从0到1-基本的plugins
