专栏首页vue学习8、webpack从0到1-基本的plugins

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

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

参考链接: webpack-html-webpack-plugin html-webpack-plugin output-management

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • panda-utils:构建发布一个自己的函数库

    Ewall
  • 1、webpack从0到1-开始

    Ewall
  • 2、webpack从0到1-模块化规范

    Ewall
  • webpack4:多页面及分离第三方库和公用文件配置

    本篇开始学习webpack打包的构建配置,所用版本为webpack 4.16.1和webpack-cli 3.2.3。

    前端_AWhile
  • webpack打包原理入门探究(四)插件探究(下)

    公众号---人生代码
  • 十五:开发模式与webpack-dev-server

    借助webpack,在开发模式下我们可以使用热重载、路由重定向、代理服务器等功能,而source-map更是准确定位代码错误的利器。

    心谭博客
  • webpack中的配置(configuration)

    少有 webpack 配置看起来很完全相同。这是因为 webpack 的配置文件,是导出一个对象的 JavaScript 文件。此对象,由 webpack 根据...

    刘亦枫
  • Linux常用命令记录

    一旦有空,就开始学习Linux常用命令,不想求学会多少,只要每天学习一点点就行了。之所以记录一下所学习的东西,是为了加深一下印象,下次再次遇到也就印象深刻了。教...

    王小婷
  • 米斯特白帽培训讲义 工具篇 Safe3 WVS

    Safe3 WVS 是一款使用较为领先的智能化爬虫技术及 SQL 注入状态检测技术的工具,相比国内外同类产品智能化程度更高,速度更快,结果更准确。

    ApacheCN_飞龙
  • DartVM服务器开发(第四天)--代码优化

    在上一篇文章中,有人问了相对路径在不同的系统的表现是不一样的,那么,我们今天使用绝对路径,获取当前项目的绝对路径是很容易的,通过下面代码获取

    rhyme_lph

扫码关注云+社区

领取腾讯云代金券