概述
首先贴上项目结构,
webpack.base.config.js部分代码
// 配置常量
const SRC_PATH = path.resolve(__dirname, '../src');
const OUTPUT_PATH = path.resolve(__dirname, '../dist');
const PUBLIC_PATH = '/dist/';
// 获取html-webpack-plugin参数的方法
const getHtmlConfig = function(name){
return {
template : './views/' + name + '.html',
filename : name + '.html',
title : name,
inject : true,
hash : true,
chunks : [name,'common']
};
};
const config = {
context: SRC_PATH,
entry: {
common : ['./pages/common/index.js'],
index: ['./pages/index/index.js'],
about: ['./pages/about/index.js'],
user: ['./pages/user/index.js']
},
output: {
path: OUTPUT_PATH,
filename: 'js/[name].[chunkhash:6].js',
publicPath: PUBLIC_PATH
},
resolve : {
alias : {
$src : path.resolve(__dirname,'../src')
}
},
plugins: [
new htmlWebpackPlugin(getHtmlConfig('index')),
new htmlWebpackPlugin(getHtmlConfig('about')),
new htmlWebpackPlugin(getHtmlConfig('user'))
]
}
webpack.prod.config.js 部分代码如下
const config = merge(baseConfig,{
mode : 'production',
optimization : {
splitChunks : {
cacheGroups : {
commons : {
name : 'vendor',
minChunks : 2,
chunks : 'all'
}
}
}
}
})
在入口文件index、about和user中都引入了lodash,最后打包出来如图
此时由于splitChunks将公共模块提取出来为vendor,但是打开最后打包生成的三个html文件(index,about,user)发现只引入了当时配的 chunks : [name,'common'] ,而vendor并没有自动引入,我觉得这里不应该把vendor写入到webpackHtmlPlugin的chunks项里面吧,因为假设我index引入了一个模块,我的user也引入了一个模块,但是我可能忘了或者并不清楚两个模块是相同的,但是splitChunks提取出来了,我也不可能所有的webpackHtmlPlugin的chunks项都引入,那就没意义了呀,请问被splitChunks提取的公共模块有没有办法自动引入呢?谢谢
最后
以上就是光亮蜜蜂为你收集整理的html公共模块提取出去,webpack-html-plugin不自动引用splitChunks提取的公共代码?的全部内容,希望文章能够帮你解决html公共模块提取出去,webpack-html-plugin不自动引用splitChunks提取的公共代码?所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复