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文件。 - + - 打包后，我们就可以看到新的dist/index.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

本文章由javascript技术分享原创和收集