Скажем, у меня есть две страницы Page1
и Page2
, обе из них используют некоторую библиотеку (вендоров), такую как jquery
backbone
, которую я хочу извлечь как один файл, тогда мне нужны общие модули ( исключить поставщиков), которые будут извлечены в другом отдельном файле, это конфигурация webpack:
function listFiles(srcpath) {
return fs.readdirSync(srcpath).filter(function (file) {
return fs.statSync(path.join(srcpath, file)).isDirectory();
});
}
var createEntry = function (src) {
var dest = {
vendor: ["backbone", "underscore"]
};
var files = listFiles(src);
files.forEach(function (dir) {
var name = dir;
dest[name] = src + "/" + dir + "/entry.js";
});
return dest;
};
//each sub directory contains a `entry.js` as the entry point for the page
var entries = createEntry("./app/pages");// {vender:['jquery','backbone'],page1:'src/page1/entry.js',page2:'src/page2/entry.js' }
var config = {
resolve: {
root: path.resolve('./app/'),
extensions: ['', '.js']
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity),
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'common.js',
minChunks: 2
})
],
entry: entries,
output: {
path: './../main/webapp/static/dist',
filename: '[name].js',
publicPath: '/static/dist'
}
};
module.exports = config;
Однако с приведенной выше конфигурацией:
common.js
содержит время выполнения webpack,
page1.js
содержит указанные модули и общие модули <1 >
page2.js
содержит указанные модули и разделяемые модули <2 >
Это означает, что page1.js
и page2.js
содержат слишком много кодов повторения.
Затем я попытался изменить конфигурацию:
var entries = createEntry("./app/pages");
var chunks = [];
for (var k in entries) {
if (k === 'vendor')
continue;
chunks.push(k);
}
new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity),
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'common.js',
minChunks: 2,
chunks:chunks
}),
Тогда
common.js
содержит среду выполнения webpack и библиотеки поставщиков, а также совместно используемые модули
vendor.js
содержит среду выполнения webpack и библиотеки поставщиков.
page1.js
содержит указанные модули 1 страницы
page2.js
содержит указанные модули <2 >
Кажется, он приближается, но common.js
не должен содержать поставщиков
Что-то не так?