标签：index 插件 文件 Webpack js webpack HTML html

程序员优雅哥简介：十年程序员，呆过央企外企私企，做过前端后端架构。分享vue、Java等前后端技术和架构。
本文摘要：主要通过实操讲解运用Webpack 5 如何集成 HTML 插件从而高效解决文件路径问题

在前面的学习中，我们创建了入口页面: template/index.html，在该文件中手动引入了打包后的 bundle.js 文件。如果打包路径修改了，index.html 中也需要修改 bundle.js 的文件路径，很不方便。其实这些工作，webpack 提供了对应的插件帮助我们完成： html-webpack-plugin。

1 安装依赖

安装 html-webpack-plugin 为开发依赖：

yarn add html-webpack-plugin -D

2 修改 webpack 配置

修改 webpack.config.js 文件：

首页引入该插件：

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

然后在 plugins节点数组中添加该插件

  plugins: [
    ...
    new HtmlWebpackPlugin()
  ],

3 测试运行

上面配置插件时只创建了对象，没有传入任何参数。先执行 yarn build 打包。 这时候会发现 dist 目录下多了一个 index.html。这个 index.html 并不是我们编写的 template/index.html 文件，而只是一个空文件，里面引入了打包后的 bundle.js 文件。

4 其他说明

4.1 使用自定义模板

如果要使用我们自己编写的index.html 文件，可以通过 HtmlWebpackPlugin 的参数指定。

  plugins: [
    ...
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'template/index.html')
    })
  ],

在template/index.html 文件中，我们无需手动引入 dist/js/bundle.js，webpack 会打包时完成对 bundle.js 的引入。

再次执行 yarn build 打包，会发现新生成的 dist/index.html 文件保留了 template/index.html 的内容，同时还自动引入了打包后的 bundle.js 文件。在浏览器中访问 dist/index.html，界面和控制台都正常显示。

4.2 压缩 HTML

使用了 html-webpack-plugin 插件，在开发模式下（mode: development）打包后的 HTML 文件不会被压缩。但在生产模式下（mode: production），打包后的 HTML 文件会被自动压缩。

今日优雅哥（\/ : youyacoder）学习结束，期待关注留言分享~~

标签：index,插件,文件,Webpack,js,webpack,HTML,html
来源： https://www.cnblogs.com/youyacoder/p/16517954.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。