单入口
开发时我们使用的框架可能是单页面应用（SPA），只有一个入口（单入口）。那么我们需要这样配置：
在 webpack.pord.js 中
module.exports = {
...
optimization: {
// 代码分割配置
splitChunks: {
chunks: 'all'
}
}
}
给模块命名
splitChunks 打包后的chunks名是随机的
就像是js文件夹下的 15.main.js，
我们怎么给他换个我们自定义的名字呢
我们只需要在import()引入的时候加一段注释,例如
main.js
document.getElementById('btn').onclick = function(){
// /* webpackChunkName: 'chunkName' */ 魔法命名 chunkName： 这个我们自定义
import(/* webpackChunkName: 'division'*/ './js/division').then(({division }) => {
console.log('资源请求成功');
alert(division(9, 3))
})
}
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webpack</title>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>
webpack.prod.js
const path = require('path')
module.exports = {
...
output: {
path: path.resolve(__dirname, 'dist'), //输出路径
filename: js/main.js, // 打包生成的文件名称
chunkFilename: 'js/[name].js', //chunk输出文件名',
clear: true, // 删除上一次打包的内容
}
...
optimization: {
splitChunks: {
chunks: 'all'
}
}
}
这样我们打包出来的chunk名字就会改变
输出文件统一命名
首先看打包的js文件夹下的目录
里面我们分不清主次，所以我们希望通过chunk的命名来区分，所有通过splitChunks分割打包的chunk名称我们添加chunk-字段
我们只需要在 webpack.config.js中，修改一下 chunkFilename
const path = require('path')
module.exports = {
...
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js',
chunkFilename: 'js/chunk-[name].js', // 主要修改一下这里，区分主次
clear: true
}
}
我们在一些其他资源的输出以及命名也可以做一个统一，比如图片，字体，视频等
我们需要做一些配置 webpack.config.js,
module.exports = {
...
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js',
chunkFilename: 'js/chunk-[name].js',
assetModuleFilename: 'media/[hash:10][ext][query]',
clear: true
}
}
注意：assetModuleFilename只适用于Asset Modules（资源模块）
