webpack打包的时CommonsChunkPlugin抽出的公共js和css文件,html-webpack-plugin渲染出的html不自动的引用公共文件。
用wewbpack构建多页应用,每个页面单独一个入口js文件,用很多公共代码所以用了CommonsChunkPlugin
对公共代码进行抽取,设定超过2次引用则抽取
但是当用了html-webpack-plugin
渲染html时,如果某个文件被抽取成公共代码,则渲染后html则不会包含公共代码。
弄了一中午没有搞定,还望各位大神指点
源代码在这里:http://pan.baidu.com/s/1qXDVeAo
//webpack.config.js
var Path =require('path');
var Wp =require('webpack');
var ETWP =require('extract-text-webpack-plugin');
var HWP = require('html-webpack-plugin');
var eSCSS = new ETWP('css/[name].css');
module.exports ={
entry :{
indexApp: Path.resolve(__dirname ,'./src/js/index.js'),
aboutApp: Path.resolve(__dirname ,'./src/js/about.js'),
},
output :{
path :'./lib/',
filename :'js/[name].js',
},
module :{
loaders :[
{
test: /\.scss$/i,
loader: eSCSS.extract(['css','sass']),
},
],
},
plugins :[
new HWP({
filename: './about.html',
template: './src/tpl/about.html',
chunks:["aboutApp","library.js?1.2.1"],
xhtml: true,
inject: true,
}),
new HWP({
filename: './index.html',
template: './src/tpl/index.html',
chunks:["indexApp"],
xhtml: true,
inject: true,
}),
new Wp.optimize.CommonsChunkPlugin({
name: 'library',
minChunks:2,
}),
};
你既然用到了CommonChunk
的插件的话,那么在不管在哪个入口页面里都必须要把CommonChunk
的包给带上,要不然会报错。因为其他的包会有对CommonChunk
的依赖。
我觉得楼主可以通过:
require.ensure([], function() {
require('someChunks');
//do something else
})
这样可以:
异步加载模块
不需要一开始加载CommonChunk
(如果你的入口文件确实不需要的话).
原因是因为你在html-webpack-plugin
的参数里指定了chunks
参数却又没有把CommonChunk包含在内。
把你的CommonChunk(在你的例子里叫library)加进chunks
里就好了,比如例子里的chunks:["library", "aboutApp","library.js?1.2.1"]