在之前的章节中我们每次打包完之后都是手动的在public/index.html中通过<script>的方式手动引入的dist/js/main.js文件。用过框架开发的小伙伴应该都有体会过,比如vue-cli,每次打包完我们直接将dist目录下的文件整个拷贝直接部署到服务器下就行了,不需要自己手动的再更改任何代码,这该怎么实现呢?
那就是今天要介绍的一个plugin->HtmlWebpackPlugin
一、 什么是HtmlWebpackPlugin
HtmlWebpackPlugin
是一个webpack插件
,用于生成HTML
文件,并自动注入生成的打包文件。它可以根据指定的模板生成HTML
文件,并自动引入本次打包后的JS
和CSS
文件。此外,它还可以生成带有哈希值的文件名以避免缓存问题。HtmlWebpackPlugin
可以方便地将webpack
与HTML文件的生成和管理进行集成
二、在webpack中使用
中文官网教程 https://webpack.docschina.org/plugins/html-webpack-plugin
1. 下载依赖
npm i html-webpack-plugin -D
2. 基本用法
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js',
},
plugins: [new HtmlWebpackPlugin({
// 以 public/index.html 为模板创建文件
// 新的html文件有两个特点:1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, "public/index.html"),
})],
};
在执行打包之前,我们先注释掉public/index.html中手动引入资源的代码
,如图:
3. 打包
npx webpack
在打包完成之后,dist目录下会新增一个index.html文件如图:
已经自动为我们引入了main.js,并保留了我们在public/index.html中的预设。文章来源:https://www.toymoban.com/news/detail-488160.html
在浏览器中运行一下,如图:
效果是一样的。文章来源地址https://www.toymoban.com/news/detail-488160.html
4. 完整的webpack.config.js代码如下
// Node.js的核心模块,专门用来处理文件路径
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin"); // 引入 ESLint 插件
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 引入 html-webpack-plugin 插件
module.exports = {
// 入口
// 相对路径和绝对路径都行
entry: "./src/main.js",
// 输出
output: {
// path: 文件输出目录,必须是绝对路径
// path.resolve()方法返回一个绝对路径
// __dirname 当前文件的文件夹绝对路径
path: path.resolve(__dirname, "dist"),
// filename: js文件输出文件名
filename: "js/main.js",
clean: true, // 自动将上次打包目录资源清空
},
// 加载器
module: {
rules: [
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader"],
},
{
// 用来匹配.less结尾的文件
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
{
test: /\.s[ac]ss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
// 用来匹配图片文件
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
},
},
generator: {
// 将图片文件输出到 images 目录中
// 将图片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: "images/[hash:8][ext][query]",
},
},
{
test: /\.(ttf|woff2?|map4|map3|avi)$/,
type: "asset/resource", // 以文件资源的形式输出
generator: {
filename: "media/[hash:8][ext][query]", // 输出到media目录中
},
},
{
test: /\.m?js$/, // 转译哪些文件
exclude: /(node_modules|bower_components)/, // 排除哪些文件夹中的js文件不用转译
// use: {
loader: 'babel-loader',
// options: {
// presets: ['@babel/preset-env'] // 添加预设,转译js文件
// }
// }
}
],
},
// 插件
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "src"),
}),
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创建文件
// 新的html文件有两个特点:1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, "public/index.html"),
}),
],
// 模式
mode: "development", // 开发模式
};
到了这里,关于webpack自动引入打包资源HtmlWebpackPlugin的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!