webpack打包原理入门探究（四）插件探究（下）
多页面 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'
}),
]
}本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-06-02，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录