基本概念
Entry Points:每个页面都有自己的入口点(entry point),例如 main-index.js 和 main-about.js。这是每个页面的起点,定义了该页面需要加载的所有资源。
Chunks:由 Webpack 生成的 JavaScript 文件块。每个页面会有自己的 chunk,还有一些共享的 chunk。
Vendor Chunk:包含第三方库的 chunk,通常命名为 chunk-vendors。这个 chunk 包含了所有从 node_modules 中引入的库。
Common Chunk:包含多个页面共享的代码,通常命名为 chunk-common。这个 chunk 包含了在多个入口点之间共享的代码。
示例
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
pages:{
product: {
entry: 'src/product/main.js',
template: 'public/product.html',
filename: 'product.html',// 可以不写 默认生成的是与template同名
title: 'Product Page',
chunks: ['chunk-vendors', 'chunk-common', 'product']
},
about: {
entry: 'src/about/main.js',
template: 'public/about.html',
filename: 'about.html',
title: 'About Page',
chunks: ['chunk-vendors', 'chunk-common', 'about']
}
},
configureWebpack:{
output: {
filename: '[name].[contenthash].js',
chunkFilename: '[name].[contenthash].js'
},
plugins:[
new HtmlWebpackPlugin({
title: 'Product',
filename: 'product-c.html', // 输出文件名 多页面时必须指定 且必须和pages得filename不一样 生成的此文件包含script在body
template: 'public/product.html',
inject:'body',
chunks: ['chunk-vendors', 'chunk-common', 'product'],
chunksSortMode: 'manual'
}),
new HtmlWebpackPlugin({
title: 'About',
template: 'public/about.html',
filename: 'about-c.html',
chunks: ['chunk-vendors', 'chunk-common', 'about'],
inject:'body',
chunksSortMode: 'manual'
})
],
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'chunk-vendors',
chunks: 'all',
},
common: {
name: 'chunk-common',
minChunks: 2,
priority: -20,
chunks: 'all',
reuseExistingChunk: true,
},
},
},
},
},
chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete('prefetch-about');
config.plugins.delete('prefetch-product');
},
};
标签:about,vue,chunk,样例,product,js,html,common
From: https://www.cnblogs.com/momoli/p/18422152