1.module,chunk,bundle的区别
- moudle - 各个源码文件,webpack中一切皆是模块
- chunk - 多模块合并成的,如
entry
,import
(),splitChunk
- bundle - 最终的输出文件
2.多文件打包配置
2.1 webpack.common.js
javascript
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { srcPath, distPath } = require('./paths')
module.exports = {
entry: {
index: path.join(srcPath, 'index.js'),
other: path.join(srcPath, 'other.js')
},
module: {
rules: [
// ----- 同上文 ----
]
},
plugins: [
// 多入口 - 生成 index.html
new HtmlWebpackPlugin({
template: path.join(srcPath, 'index.html'),
filename: 'index.html',
// chunks 表示该页面要引用哪些 chunk (即上面的 index 和 other),默认全部引用
// chunks: ['index'] // 只引用 index.js
}),
// 多入口 - 生成 other.html
new HtmlWebpackPlugin({
template: path.join(srcPath, 'other.html'),
filename: 'other.html',
// chunks: ['other'] // 只引用 other.js
})
]
}
- 上面的
chunks
配置,如果不配置chunks
,那么打包出来的结果是默认引入全部js
javascript
<body>
<p>webpack demo</p>
<input type="text"/>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="other.js"></script>
</body>
- 如果配置了chunks,那么就只引入对应的结果
javascript
<body>
<p>webpack demo</p>
<input type="text"/>
<script type="text/javascript" src="index.js"></script>
</body>
2.2 webpack.prod.js
javascript
const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpackCommonConf = require('./webpack.common.js')
const { smart } = require('webpack-merge')
const { srcPath, distPath } = require('./paths')
module.exports = smart(webpackCommonConf, {
mode: 'production',
output: {
// filename: 'bundle.[contentHash:8].js', // 打包代码时,加上 hash 戳
filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 key
path: distPath,
// publicPath: 'http://cdn.abc.com' // 修改所有静态文件 url 的前缀(如 cdn 域名),这里暂时用不到
},
module: {
rules: [
//代码重复
]
},
plugins: [
new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹
new webpack.DefinePlugin({
// window.ENV = 'production'
ENV: JSON.stringify('production')
})
]
})
- 多入口时,
output
出口的【name
】变量会对应到入口的变量名