第一种：多入口
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 单入口
// entry: './src/js/index.js',
entry: {
// 多入口：有一个入口，最终输出就有一个bundle
main: './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
}
})
],
mode: 'production'
};
第二种：单独打包第三方模块为一个js，可配合多入口
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
process.env.NODE_ENV = 'production';
module.exports = {
// 单入口
// entry: './src/js/index.js',
entry:{
main:'./src/js/index.js',
entry:'./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
}
})
],
optimization: {
/**
* 1. 可以将node_modules中代码单独打包一个chunk最终输出
* 2. 自动分析多入口chunk中，有没有公共的文件。如果有会打包成单独一个chunk
*/
splitChunks: {
chunks: 'all'
}
},
mode: 'production'
};
第三种：通过js单独打包
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
process.env.NODE_ENV = 'production';
module.exports = {
// 单入口
entry: './src/js/index.js',
// entry:{
// main:'./src/js/index.js',
// entry:'./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
}
})
],
optimization: {
/**
* 1. 可以将node_modules中代码单独打包一个chunk最终输出
* 2. 自动分析多入口chunk中，有没有公共的文件。如果有会打包成单独一个chunk
*/
splitChunks: {
chunks: 'all'
}
},
mode: 'production'
};
function sum(...args) {
return args.reduce((p, c) => p + c, 0);
}
/**
* 通过js代码，让某个文件被单独打包成一个chunk
* import动态导入语法：能将某个文件单独打包
*/
import(/* webpackChunkName: 'test' */'./test').then(({ mul, count }) => {
// eslint-disable-next-line
console.log(mul(2, 5))
}).catch(() => {
// eslint-disable-next-line
console.log('文件加载失败');
})
