当前位置：首页 > news >正文

02.webpack中多文件打包

news 2025/8/8 16:04:01

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: [// 多入口 - 生成 index.htmlnew HtmlWebpackPlugin({template: path.join(srcPath, 'index.html'),filename: 'index.html',// chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用// chunks: ['index']  // 只引用 index.js}),// 多入口 - 生成 other.htmlnew HtmlWebpackPlugin({template: path.join(srcPath, 'other.html'),filename: 'other.html',// chunks: ['other']  // 只引用 other.js})]
}

上面的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>

如果配置了chunks，那么就只引入对应的结果

<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: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 戳filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 keypath: 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')})]
})