多页面 html 生成
-
let path = require(
'path')
-
let htmlWebpackPlugin = require(
'html-webpack-plugin')
-
function resolve(o) {
-
return path.resolve(__dirname, o)
-
}
-
module.exports = {
-
entry: {
-
main: resolve(
'src/scripts/main.js'),
-
a: resolve(
'src/scripts/a.js'),
-
b: resolve(
'src/scripts/b.js'),
-
c: resolve(
'src/scripts/c.js')
-
},
// 指定入口文件
-
output: {
-
path: resolve(
'dist'),
-
// filename: '[name]-[hash].js'
-
filename:
"js/[name]-[chunkhash].js"
-
},
-
plugins: [
-
new htmlWebpackPlugin({
-
// filename: "index-[hash].html",
-
// filename: 'index-[chunkhash].html',
-
filename:
"a.html",
// 生成 dist/a.html
-
template:
'index.html',
// 指定根目录下的 index.html
-
inject:
'head',
-
title:
'html webpack plugin aaaaa'
-
}),
-
new htmlWebpackPlugin({
-
// filename: "index-[hash].html",
-
// filename: 'index-[chunkhash].html',
-
filename:
"b.html",
// 生成 dist/b.html
-
template:
'index.html',
// 指定根目录下的 index.html
-
inject:
'head',
-
title:
'html webpack plugin bbbbb'
-
}),
-
new htmlWebpackPlugin({
-
// filename: "index-[hash].html",
-
// filename: 'index-[chunkhash].html',
-
filename:
"c.html",
// 生成 dist/c.html
-
template:
'index.html',
// 指定根目录下的 index.html
-
inject:
'head',
-
title:
'html webpack plugin cccccc'
-
}),
-
]
-
}
多页面 html 生成 只加载对应 的chunks
-
let path = require(
'path')
-
let htmlWebpackPlugin = require(
'html-webpack-plugin')
-
function resolve(o) {
-
return path.resolve(__dirname, o)
-
}
-
module.exports = {
-
entry: {
-
main: resolve(
'src/scripts/main.js'),
-
a: resolve(
'src/scripts/a.js'),
-
b: resolve(
'src/scripts/b.js'),
-
c: resolve(
'src/scripts/c.js')
-
},
// 指定入口文件
-
output: {
-
path: resolve(
'dist'),
-
// filename: '[name]-[hash].js'
-
filename:
"js/[name]-[chunkhash].js"
-
},
-
plugins: [
-
new htmlWebpackPlugin({
-
// filename: "index-[hash].html",
-
// filename: 'index-[chunkhash].html',
-
filename:
"a.html",
// 生成 dist/a.html
-
template:
'index.html',
// 指定根目录下的 index.html
-
inject:
'body',
-
chunks: [
'main',
'a'],
-
title:
'html webpack plugin aaaaa'
-
}),
-
new htmlWebpackPlugin({
-
// filename: "index-[hash].html",
-
// filename: 'index-[chunkhash].html',
-
filename:
"b.html",
// 生成 dist/b.html
-
template:
'index.html',
// 指定根目录下的 index.html
-
inject:
'body',
-
chunks: [
'b'],
-
title:
'html webpack plugin bbbbb'
-
}),
-
new htmlWebpackPlugin({
-
// filename: "index-[hash].html",
-
// filename: 'index-[chunkhash].html',
-
filename:
"c.html",
// 生成 dist/c.html
-
template:
'index.html',
// 指定根目录下的 index.html
-
inject:
'body',
-
chunks: [
'c'],
-
title:
'html webpack plugin cccccc'
-
}),
-
]
-
}
a.html
-
<!DOCTYPE html>
-
<html lang=
"en">
-
<head>
-
<meta charset=
"UTF-8">
-
<meta name=
"viewport" content=
"width=device-width, initial-scale=1.0">
-
<meta http-equiv=
"X-UA-Compatible" content=
"ie=edge">
-
<title>html webpack plugin aaaaa</title>
-
</head>
-
<body>
-
<!-- 哈哈哈哈哈 -->
-
<h5>htmlWebpackPlugin object</h5>
-
-
files
-
---
-
[object Object]
-
-
options
-
---
-
[object Object]
-
-
<h5>htmlWebpackPlugin.files</h5>
-
-
publicPath
-
---
-
-
-
chunks
-
---
-
[object Object]
-
-
js
-
---
-
js/main
-8a0feb42c16e4b4ccc97.js,js/a-a1ad07a706a1b2702814.js
-
-
css
-
---
-
-
-
manifest
-
---
-
-
-
<h5>htmlWebpackPlugin.options</h5>
-
-
template
-
---
-
e:\webpackdemo\node_modules\_html-webpack-plugin@
3.2
.0@html-webpack-plugin\lib\loader.js!e:\webpackdemo\index.html
-
-
templateParameters
-
---
-
function templateParametersGenerator (compilation, assets, options) {
-
return {
-
compilation: compilation,
-
webpack: compilation.getStats().toJson(),
-
webpackConfig: compilation.options,
-
htmlWebpackPlugin: {
-
files: assets,
-
options: options
-
}
-
};
-
}
-
-
filename
-
---
-
a.html
-
-
hash
-
---
-
false
-
-
inject
-
---
-
body
-
-
compile
-
---
-
true
-
-
favicon
-
---
-
false
-
-
minify
-
---
-
false
-
-
cache
-
---
-
true
-
-
showErrors
-
---
-
true
-
-
chunks
-
---
-
main,a
-
-
excludeChunks
-
---
-
-
-
chunksSortMode
-
---
-
auto
-
-
meta
-
---
-
[object Object]
-
-
title
-
---
-
html webpack plugin aaaaa
-
-
xhtml
-
---
-
false
-
-
<script
type=
"text/javascript" src=
"js/main-8a0feb42c16e4b4ccc97.js"></script><script
type=
"text/javascript" src=
"js/a-a1ad07a706a1b2702814.js"></script></body>
-
</html>
b.html
-
<!DOCTYPE html>
-
<html lang=
"en">
-
<head>
-
<meta charset=
"UTF-8">
-
<meta name=
"viewport" content=
"width=device-width, initial-scale=1.0">
-
<meta http-equiv=
"X-UA-Compatible" content=
"ie=edge">
-
<title>html webpack plugin bbbbb</title>
-
</head>
-
<body>
-
<!-- 哈哈哈哈哈 -->
-
<h5>htmlWebpackPlugin object</h5>
-
-
files
-
---
-
[object Object]
-
-
options
-
---
-
[object Object]
-
-
<h5>htmlWebpackPlugin.files</h5>
-
-
publicPath
-
---
-
-
-
chunks
-
---
-
[object Object]
-
-
js
-
---
-
js/b
-4af1b36b33599d5438fc.js
-
-
css
-
---
-
-
-
manifest
-
---
-
-
-
<h5>htmlWebpackPlugin.options</h5>
-
-
template
-
---
-
e:\webpackdemo\node_modules\_html-webpack-plugin@
3.2
.0@html-webpack-plugin\lib\loader.js!e:\webpackdemo\index.html
-
-
templateParameters
-
---
-
function templateParametersGenerator (compilation, assets, options) {
-
return {
-
compilation: compilation,
-
webpack: compilation.getStats().toJson(),
-
webpackConfig: compilation.options,
-
htmlWebpackPlugin: {
-
files: assets,
-
options: options
-
}
-
};
-
}
-
-
filename
-
---
-
b.html
-
-
hash
-
---
-
false
-
-
inject
-
---
-
body
-
-
compile
-
---
-
true
-
-
favicon
-
---
-
false
-
-
minify
-
---
-
false
-
-
cache
-
---
-
true
-
-
showErrors
-
---
-
true
-
-
chunks
-
---
-
b
-
-
excludeChunks
-
---
-
-
-
chunksSortMode
-
---
-
auto
-
-
meta
-
---
-
[object Object]
-
-
title
-
---
-
html webpack plugin bbbbb
-
-
xhtml
-
---
-
false
-
-
<script
type=
"text/javascript" src=
"js/b-4af1b36b33599d5438fc.js"></script></body>
-
</html>
c.html
-
<!DOCTYPE html>
-
<html lang=
"en">
-
<head>
-
<meta charset=
"UTF-8">
-
<meta name=
"viewport" content=
"width=device-width, initial-scale=1.0">
-
<meta http-equiv=
"X-UA-Compatible" content=
"ie=edge">
-
<title>html webpack plugin cccccc</title>
-
</head>
-
<body>
-
<!-- 哈哈哈哈哈 -->
-
<h5>htmlWebpackPlugin object</h5>
-
-
files
-
---
-
[object Object]
-
-
options
-
---
-
[object Object]
-
-
<h5>htmlWebpackPlugin.files</h5>
-
-
publicPath
-
---
-
-
-
chunks
-
---
-
[object Object]
-
-
js
-
---
-
js/c
-5055009ef9e9d5580df1.js
-
-
css
-
---
-
-
-
manifest
-
---
-
-
-
<h5>htmlWebpackPlugin.options</h5>
-
-
template
-
---
-
e:\webpackdemo\node_modules\_html-webpack-plugin@
3.2
.0@html-webpack-plugin\lib\loader.js!e:\webpackdemo\index.html
-
-
templateParameters
-
---
-
function templateParametersGenerator (compilation, assets, options) {
-
return {
-
compilation: compilation,
-
webpack: compilation.getStats().toJson(),
-
webpackConfig: compilation.options,
-
htmlWebpackPlugin: {
-
files: assets,
-
options: options
-
}
-
};
-
}
-
-
filename
-
---
-
c.html
-
-
hash
-
---
-
false
-
-
inject
-
---
-
body
-
-
compile
-
---
-
true
-
-
favicon
-
---
-
false
-
-
minify
-
---
-
false
-
-
cache
-
---
-
true
-
-
showErrors
-
---
-
true
-
-
chunks
-
---
-
c
-
-
excludeChunks
-
---
-
-
-
chunksSortMode
-
---
-
auto
-
-
meta
-
---
-
[object Object]
-
-
title
-
---
-
html webpack plugin cccccc
-
-
xhtml
-
---
-
false
-
-
<script
type=
"text/javascript" src=
"js/c-5055009ef9e9d5580df1.js"></script></body>
-
</html>
多页面 html 生成 只加载对应 的 excludeChunks
-
let path = require(
'path')
-
let htmlWebpackPlugin = require(
'html-webpack-plugin')
-
function resolve(o) {
-
return path.resolve(__dirname, o)
-
}
-
module.exports = {
-
entry: {
-
main: resolve(
'src/scripts/main.js'),
-
a: resolve(
'src/scripts/a.js'),
-
b: resolve(
'src/scripts/b.js'),
-
c: resolve(
'src/scripts/c.js')
-
},
// 指定入口文件
-
output: {
-
path: resolve(
'dist'),
-
// filename: '[name]-[hash].js'
-
filename:
"js/[name]-[chunkhash].js",
-
// publicPath: ''
-
},
-
plugins: [
-
new htmlWebpackPlugin({
-
// filename: "index-[hash].html",
-
// filename: 'index-[chunkhash].html',
-
filename:
"a.html",
// 生成 dist/a.html
-
template:
'index.html',
// 指定根目录下的 index.html
-
inject:
'body',
-
chunks: [
'main',
'a'],
-
excludeChunks: [
'b'],
-
title:
'html webpack plugin aaaaa'
-
}),
-
new htmlWebpackPlugin({
-
// filename: "index-[hash].html",
-
// filename: 'index-[chunkhash].html',
-
filename:
"b.html",
// 生成 dist/b.html
-
template:
'index.html',
// 指定根目录下的 index.html
-
inject:
'body',
-
chunks: [
'b'],
-
excludeChunks: [
'c',
'a'],
-
title:
'html webpack plugin bbbbb'
-
}),
-
new htmlWebpackPlugin({
-
// filename: "index-[hash].html",
-
// filename: 'index-[chunkhash].html',
-
filename:
"c.html",
// 生成 dist/c.html
-
template:
'index.html',
// 指定根目录下的 index.html
-
inject:
'body',
-
chunks: [
'c'],
-
excludeChunks: [
'a',
'b'],
-
title:
'html webpack plugin cccccc'
-
}),
-
]
-
}
嗯，这一节课就到此为止了
转载：https://blog.csdn.net/qq_36772866/article/details/106513919
查看评论