多个webpack配置,单个反应库块

时间:2017-01-05 01:52:59

标签: reactjs webpack microservices

我一直在研究将微服务概念应用到前端。我希望实现的一个重要好处是使用我的React应用程序可独立部署的UI组件/页面。我正在考虑采用像article这样的复合前端方法。

我们的应用程序可能有多个webpack配置,每个主要页面/组件一个。我希望能够在每个页面中使用单个React lib块。以下是两个可能的webpack配置示例:

// Page 1 component
var webpack = require("webpack");

module.exports = {
    entry: {
        Page1: 'Page1.js',
        React: ['react', 'react-dom']
    },
    output: {
        filename: '[name].js'
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style!css'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('React', 'bundle.react.js')
    ]
}

// Page 2 component
var webpack = require("webpack");

module.exports = {
    entry: {
        Page2a: 'Page2a.js',
        Page2b: 'Page2b.js',
        React: ['react', 'react-dom']
    },
    output: {
        filename: '[name].js'
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style!css'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('React', 'bundle.react.js')
    ]
}

这可以在不同的webpack配置中引用相同的公共块吗?

0 个答案:

没有答案