世界上最伟大的投资就是投资自己的教育
之前我们只写了一个 html 文件，就是 src/index.html，但是有时候我们是需要多个的，这个时候，怎么办呢？
之前我们是这么做的，用了 html-webpack-plugin 这个插件来输出 html 文件。
webpack.config.js
...
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
collapseWhitespace: true,
},
hash: true,
})
...
之前怎么做，现在还是怎么做，我们复制一下，改个名字不就好吗？
webpack.config.js
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
collapseWhitespace: true,
},
hash: true,
}),
new HtmlWebpackPlugin({
template: './src/contact.html',
filename: 'contact.html',
minify: {
collapseWhitespace: true,
},
hash: true,
})
src/contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact</title>
</head>
<body>
<p>Contact page</p>
</body>
</html>
有个问题，contact.html 使用的 js 和 css 跟 index.html 是一模一样的
如果我要让 contact.html 使用跟 index.html 不同的 js，如何做呢？（只要保证 js 不同，css 也会不同的，因为 css 也是由 js 里 import 的嘛)
那我们来改造一下：
...
module.exports = {
entry: {
"app.bundle": './src/app.js',
// 这行是新增的。
"contact": './src/contact.js'
},
...
plugins: [
new CleanWebpackPlugin(pathsToClean),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
collapseWhitespace: true,
},
hash: true,
// 这行是新增的。
excludeChunks: ['contact']
}),
new HtmlWebpackPlugin({
template: './src/contact.html',
filename: 'contact.html',
minify: {
collapseWhitespace: true,
},
hash: true,
// 这行是新增的。
chunks: ['contact']
}),
new ExtractTextPlugin('style.css')
],
...
};
上面的 excludeChunks 指的是不包含， chunks 代表的是包含。
src/contact.js
console.log('hi from contact js')
结果：
这样就 OK 了。
先说这么多。
03:521FreeWebpack 3 零基础入门视频教程 #1 - 介绍
03:382FreeWebpack 3 零基础入门视频教程 #2 - 安装
07:373FreeWebpack 3 零基础入门视频教程 #3 - 实现 hello world
03:414FreeWebpack 3 零基础入门视频教程 #4 - Webpack 的配置文件 Webpack.config.js
11:095FreeWebpack 3 零基础入门视频教程 #5 - 使用第一个 Webpack 插件 html-Webpack-plugin
12:516FreeWebpack 3 零基础入门视频教程 #6 - 使用 loader 处理 CSS 和 Sass
06:247FreeWebpack 3 零基础入门视频教程 #7 - 初识 Webpack-dev-server
05:098FreeWebpack 3 零基础入门视频教程 #8 - 用 Webpack 和 babel 配置 React 开发环境
05:079FreeWebpack 3 零基础入门视频教程 #9 - 用 clean-Webpack-plugin 来清除文件
06:38FreeWebpack 3 零基础入门视频教程 #10 - 配置多个 HTML 文件
04:0911FreeWebpack 3 零基础入门视频教程 #11 - 如何使用 pug (jade) 作为 HTML 的模板
07:5312FreeWebpack 3 零基础入门视频教程 #12 - 如何使用模块热替换 HMR 来处理 CSS
06:3313FreeWebpack 3 零基础入门视频教程 #13 - 生产环境 vs 开发环境
10:2114FreeWebpack 3 零基础入门视频教程 #14 - 如何打包图片
学习到了6:23学习到了0:00
学习到了7:01学习到了7:04学习到了7:04
学习到了5:53学习到了6:52
学习到了4:37学习到了7:04学习到了7:04学习到了7:04学习到了7:04学习到了7:04学习到了7:04学习到了7:04学习到了7:01
学习到了6:59学习到了6:09
学习到了7:01学习到了7:04学习到了7:04学习到了6:48学习到了6:29▬▬▬▬▬▬ 联系我 👋 ▬▬▬▬▬▬
知乎：https://www.zhihu.com/people/rails365
掘金：https://juejin.cn/user/1574156379888263
b 站：https://space.bilibili.com/31152817
Github：https://github.com/hfpp2012
Youtube：https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg
Discord：https://discord.gg/5rdjnEnU7F
Twitter：https://twitter.com/qiuzhi99pro
Facebook：https://twitter.com/qiuzhi99pro
Instagram：https://www.facebook.com/pro.qiuzhi/
▬▬▬▬▬▬ 微信相关 👋 ▬▬▬▬▬▬
© 汕尾市求知科技有限公司 | 专业版网站 | 在线学员：1128
粤公网安备 44152102000088号
| 粤ICP备19038915号