html-webpack-plugin
使用
自动生成使用 bundle.js 的html
在这之前，html 都是通过硬编码的方式单独去存放在项目的根目下的。这种方式有两个问题：
- 第一就是我们在项目发布时，我们需要同时去发布跟目录下的HTML文件和目录下所有的打包结果，这样的话相对麻烦一些，而且在上线过后还需要去确保 html 的代码当中路径引用都是正确的。
- 第二个问题就是如果说我们输出的目录或者是输出的文件名，那也就是我们打包结果的配置发生了变化。那 HTML 代码当中 script 的标签所引用的那个路径也就需要我们手动的去修改。这是硬编码的方式存在的两个问题。
解决这两个问题最好的办法，就是通过 webpack 自动去生成我们的HTML文件。也就是让 html 也去参与到 webpack 的构建过程。那在构建过程中 webpack 知道他生成了多少个 bundle，会将自动打包的 bundle 自动添加到我们的页面当中。那这样的话，（1）一来我们的 html 它也输出到了 dist 目录，那上线时候我们就只需要把 dist 目录发布出去就可以了。（2）二来 html 中对于 bundle 的引用，它是动态的注入进来的，它不需要我们手动的去硬编码。所以说它可以确保路径的引用是正常的。
具体实现靠 html-webpack-plugin
-
webpack 5 版本
npm i --save-dev html-webpack-plugin@next yarn add --dev html-webpack-plugin@nextwebpack 4 版本
yarn add html-webpack-plugin --dev -
const HtmlWebpackPlugin = require('html-webpack-plugin')不同于 clean-webpack-plugin，默认导出的就是插件类型，不需要解构它内部成员 -
new HtmlWebpackPlugin()添加这个类型的实例对象 -
yarn webpack
以后html就直接在dist一起上传
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
webpack.config.js
const path = require('path')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'none',
entry: './src/index.js',
output: {
filename:'bundle.js',
path: path.join(__dirname,'dist')
},
module:{
rules:[
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Custom template',
// 加载自定义模块
template: 'index.html'
})
]
}
改进
1、模块化html，index.html 作为模板，内容通过webpack属性获取
new HtmlWebpackPlugin({
title: 'Custom template',
// 加载自定义模块
template: 'index.html',
meta: {
viewport: 'width=device-width'
},
content: 'nihao'
})
<!-- index.html -->
<title><%= htmlWebpackPlugin.options.title %></title>
<h1><%= htmlWebpackPlugin.options.content %></h1>
<!-- 打包好的index会自动获取webpack中的属性 -->
<title>Custom template</title>
<h1>nihao</h1>
2、同时输出多个页面文件
filename 默认是index.html ，指定输出的文件名
如果说我们需要去创建多个页面，那我就可以在插件列表当中去加入多个htmlWebpackPlugin的实例对象，每一个对象负责生成一个页面文件。
new HtmlWebpackPlugin({
title: 'Index template',
// 加载自定义模块from index.html
template: 'index.html',
meta: {
viewport: 'width=device-width'
},
content: '主页'
}),
new HtmlWebpackPlugin({
filename: 'about.html',
title: 'About template',
// 加载自定义模块from index.html，根目录下必须有个index.html才行！
template: 'index.html',
meta: {
viewport: 'width=device-width'
},
content: '关于我们'
})
<!-- index.html -->
<title>Index template</title>
<h1>主页</h1>
<!-- about.html -->
<title>About template</title>
<h1>关于我们</h1>
扫一扫
112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
