js文件拆分,将打包后多个js合并的一个js分割成多个,并行加载
1. 多入口模式和splitChunks配合,可以将js拆分成多个,并且可以将node_modules中代码单独打包,公共的文件打包成单独一个chunk
2. 单入口模式和splitChunks配合,可以将node_modules中代码单独打包
3, 单入口模式和splitChunks加上在js中用import动态导入语法,能将某个文件单独打包,并且可以将node_modules中代码单独打包
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 单入口
// entry: './src/js/index.js',
//多入口
entry: {
index: './src/js/index.js',
test: './src/js/test.js'
output: {
// [name]：取文件名
filename: 'js/[name].[contenthash:10].js',
path: resolve(__dirname, 'build')
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
1. 可以将node_modules中代码单独打包一个chunk最终输出
2. 自动分析多入口chunk中，有没有公共的文件。如果有会打包成单独一个chunk
optimization: {
splitChunks: {
chunks: 'all'
mode: 'production'
webpackChunkName: 'test' 在js中给分离出去的js命名
import(/* webpackChunkName: 'test' */'./test')
.then(({ mul, count }) => {
// 文件加载成功~
// eslint-disable-next-line
console.log(mul(2, 5));
.catch(() => {
// eslint-disable-next-line
console.log('文件加载失败~');
