1.module,chunk,bundle的区别
- moudle - 各个源码文件,webpack中一切皆是模块
- chunk - 多模块合并成的,如
entry
, import
(), splitChunk
- bundle - 最终的输出文件
2.多文件打包配置
2.1 webpack.common.js
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: [new HtmlWebpackPlugin({template: path.join(srcPath, 'index.html'),filename: 'index.html',}),new HtmlWebpackPlugin({template: path.join(srcPath, 'other.html'),filename: 'other.html',})]
}
- 上面的
chunks
配置,如果不配置chunks
,那么打包出来的结果是默认引入全部js
<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>
<body><p>webpack demo</p><input type="text"/><script type="text/javascript" src="index.js"></script>
</body>
2.2 webpack.prod.js
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: '[name].[contentHash:8].js', path: distPath,},module: {rules: []},plugins: [new CleanWebpackPlugin(), new webpack.DefinePlugin({ENV: JSON.stringify('production')})]
})
- 多入口时,
output
出口的【name
】变量会对应到入口的变量名