龙空技术网

Webpack学习系列 | Webpack 5 集成 HTML 插件高效解决文件路径问题

程序员优雅哥 70

前言:

现时我们对“html路径”可能比较关怀,兄弟们都需要分析一些“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)学习结束,期待关注留言分享~~

标签: #html路径 #html引用路径