我将Webpack配置为拆分供应商和应用程序块。所有页面都使用供应商块。 供应商文件仅适用于构建它的应用程序文件。该项目有多个页面,每个页面都是自己构建的,并有自己的app.js和bse.js.我想在所有页面中使用bse.js。
page A have:
- app.js
- bse.js
page B have:
- app.js
- bse.js
page C have:
- app.js
- bse.js
我想为所有页面使用bse.js共享供应商块。所以浏览器只会加载一次文件。
这是我每个页面的配置文件。
module.exports = function (grunt) {
var webpack = require('webpack');
var path = require('path');
var entry = {
app:path.join(__dirname, './jvs/app.js') ,
bse:['react', 'react-dom'] //Vendor bundle
};
var commonPlugin = [new webpack.optimize.CommonsChunkPlugin({
name: "bse",
filename:"bse.js",
minChunks: Infinity
})];
var commonPluginProduction = [new webpack.optimize.CommonsChunkPlugin({
name: "bse",
filename:"bse.js",
minChunks: Infinity
})];
// We need to uglify that code on deploy
var uglifyPlugin = [
new webpack.optimize.UglifyJsPlugin(
{
compress: {
drop_console: true
},
output: {
comments: false
}
}
),
];
// The loader transforms our JSX content
var module = {
loaders: [
{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react','es2015','stage-0','stage-1','stage-2','stage-3'],
}
}
]
};
grunt.initConfig({
webpack: {
dev: {
entry: entry,
plugins: commonPlugin,
watch: true,
keepalive: true,
stats: {
timings: true
},
devtool: "#inline-source-map", // Here we get our sourcemap
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'out')
},
module: module
},
dist: {
entry: entry,
plugins: commonPluginProduction.concat(new webpack.DefinePlugin({
"process.env": {
// This has effect on the react lib size
"NODE_ENV": JSON.stringify("production")
}
}),
//new webpack.optimize.DedupePlugin(),
uglifyPlugin),
output: {
filename: 'app.min.js',
path: path.resolve(__dirname, 'out')
},
module: module
}
}
});
grunt.loadNpmTasks('grunt-collection');
grunt.registerTask('default', ['webpack:dev']);
grunt.registerTask('deploy', ['webpack:dist']);
}