如何使用 Webpack 插件管理资源

领航猿麦兜
79 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情

下面学习如何使用 HtmlWebpackPlugin 这个插件来解决，我们上一章最后遗留手动修改 index.html 文件中加载 JS 文件的路径才能够在浏览器里正常显示的问题。

HtmlWebpackPlugin 简化了 HTML 文件的创建，以便为你的 Webpack 包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 Webpack 包特别有用。你可以让该插件为你生成一个 HTML 文件，使用 lodash 模板提供模板，或者使用你自己的 loader。

该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 Webpack 生成的 bundle。

要使用 HtmlWebpackPlugin 插件，我们必须得安装这个插件。 打开 VS Code 工具，在项目的根目录下安装这个插件。

npm install html-webpack-plugin -D

image.png

等待片刻以后，这个插件就安装好了。安装好了以后，需要配置插件。在 webpack.config.js 文件配置 HtmlWebpackPlugin 插件。

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
//...
module.exports = {
   //...
    plugins: [new HtmlWebpackPlugin()],
}

 

  • 使用 const 定义一个常量，并且使用 require 关键字导入 HtmlWebpackPlugin 依赖；

  • 使用 new 关键字实例化 HtmlWebpackPlugin，也就是要使用插件，必须实例化它。

这个配置完成了以后，我们就可以用它来完成 index.html 自动化的生成。执行 npx webpack 命令。

image.png

可以看到，我们发现除了上节中介绍自定义生成 bundle.js 文件以为，还新新生成一个 index.html 文件。

 

<!doctype html>
<html>


<head>
    <meta charset="utf-8">
    <title>Webpack App</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script defer="defer" src="bundle.js"></script>
</head>


<body></body>


</html>

 

发现在 标签的下有个

如果你有多个 Webpack 入口，它们都会在已生成 HTML 文件中的

这个文件能不能在浏览器上面正常运行呢？在浏览访问该文件所在路径，发现这个程序正常的运行了，说明程序自动帮助我们添加的那个

  image.png

大家可能会问，dist/index.html 是不是根据 dist 目录外边的 index.html 生成？答案肯定不是。删除 dist 目录外边的 index.html 文件，重新打包会不会生成index.html 文件。发现在 dist 目录下同样会自动生成 index.html 文件，说明它们两没有有任何关系。

  image.png

我们能不能通过一些配置让它们俩有关系呢，或者我们能不能基于 dist 目录外边的 index.html 生成 dist 目录下的 index.html 文件呢？这个是肯定可以的。不过需要配置。

在 webpack.config.js 配置插件选项，Webpack 的 HtmlWebpackPlugin 给我们提供了非常多的选项，详细选项大家可以参考 HtmlWebpackPlugin GitHub 官网。

 

const HtmlWebpackPlugin = require('html-webpack-plugin')


   // ...
module.exports = {
  //...


    plugins: [new HtmlWebpackPlugin({
        template:'./index.html',
        filename:'index_app.html',
        inject:'body'
    })],


}

执行 npx webpack 命令，可以看到 dist 目录下生成 index_app.html 文件。这个就是我们在 webpack.config.js 文件中配置的。

image.png

在 index_app.html 文件中，

我们现在在浏览器中验证打包以后的 index_aap.html 文件能不能正常的工作。可以看到我们的程序能够正常的运行。

image.png   我们再仔细的观察一下，我们发现之前我们打包的 index.html 存在。那么我们能不能再生成新的打包的文件的时候，把上次遗留的那个文件给清理掉呢？这个是可以的。

avatar
文章
阅读
粉丝