webpack2使用ch5-多页面设置 内部js和引入js
2024-10-15 14:55:39
1 当前目录
2 webpack.config.js 配置
const webpack = require('webpack'),
htmlWebpackPlugin = require('html-webpack-plugin'),
path = require('path');
module.exports = {
entry: {
main: './src/script/main.js',
a: './src/script/a.js',
b: './src/script/b.js',
c: './src/script/c.js'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name]-[chunkhash].js',
publicPath: 'http://cdn.com/'
},
plugins: [
new htmlWebpackPlugin({
filename: 'a.html',
template: 'index.html',
inject: 'body',
title: 'this is a',
excludeChunks: ['b', 'c'] //不包括的chunks
}),
new htmlWebpackPlugin({
filename: 'b.html',
template: 'index.html',
inject: 'body',
title: 'this is b',
excludeChunks: ['a', 'c']
}),
new htmlWebpackPlugin({
filename: 'c.html',
template: 'index.html',
inject: 'body',
title: 'this is c',
excludeChunks: ['a', 'b']
})
]
};
4 根目录模板 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<!--将mian.js写在页面里面
去掉不带publicPath的内容如 http://cdn.cn/
compilation.assets[].source()
-->
<script type="text/javascript">
<%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
</script>
</head>
<body> <!--如果chunk有main.js就不引入 因为上面引入了??????-->
<% for(var key in htmlWebpackPlugin.files.chunks){ %>
<% if(key !== 'main'){ %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks.entry %>"></script>
<% } %>
<% } %>
</body>
</html>
5 打包
6 查看变化
6.1 a.html
6.2 b.html
6.3 c.html
最新文章
- linux设置定时备份mysql数据库
- sharepoint报HRESULT:0x80131904的错误的原因和解决方法
- 从零自学Hadoop(12)：Hadoop命令中
- python 多态
- Linux（10.18-10.25）学习笔记
- PHP中的错误处理和异常处理
- 关于Switch结构利用
- HDU 3062 Party
- HDU 4496 D-City(并查集，逆思维)
- WC约束示使用
- iOS UILabel：宽度固定，自动高度显示全部文字
- javascript创建对象（二）
- openresty nginx 安装过程记录
- 查看堵塞的SQL
- VS生成时复制文件到指定目录
- mysql笔记一——安装和设置root密码
- BZOJ4554 - [TJOI2016&HEOI2016]游戏
- hdu 3478 Catch--二分图判断
- js查重去重性能优化心得
- VS开发入门三：c#的类的修饰符和成员的修饰符