Webpack:在不工作的页面上拆分和共享供应商块

时间:2017-09-10 17:18:06

标签: reactjs webpack

我将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']);

}

0 个答案:

没有答案