继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

8、webpack从0到1-基本的plugins

Ewall_
关注TA
已关注
手记 85
粉丝 7084
获赞 266

谈谈plugins,然后使用两个基本的plugins,一个是clean-webpack-plugin,一个是HtmlWebpackPlugin。
git仓库:webpack-demo

1、plugins初识

  • 什么是webpackplugins?首先回顾一下前面几章讲webpackloaders相关概念时,我将它理解为一个赋能的概念,各种各样的loaderwebpack提供了处理不同文件的能力,使webpack变得更强大了。

  • webpackplugins,则可以把它理解为类似于框架的生命周期(钩子/函数),比如可以在页面mounted的时候做些事情、在页面show的时候做些事情,离开页面destroyed的时候做些事情等等。同理,plugins也可以让我们在webpack打包过程中的不同阶段来做些事情。

  • 大概感觉就是这么个感觉,具体我们实践出真章。

2、过程回顾

  • 首先我们回顾下我们打包or重新打包的一个大体的过程啊:

    • ①我们先会手动删除掉dist文件夹,避免再次打包有冗余重复的js文件;
    • ②复制一份src/index.htmldist目录下;
    • 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这个插件来解决这个问题。
打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP