Question

我目前正在Liferay Java开源门户平台上构建应用程序，并遇到一些问题，配置我的webpack以便在大型项目结构中与React进行最佳协作。

Liferay有一个主题的概念，它包含网站上任何页面所需的所有JS / CSS，以及portlet，它们是可以放在某些页面上的自包含模块（portlet有自己的JS与主题分开）。我的webpack非常适合我的主题JS，但我想为每个webpack包使用相同的react副本，而不是包含每个portlet的副本。但是，当我尝试这样做时，我得到一个关于没有定义ReactDOM的错误。

Liferay的项目结构如下：

    -root
        -modules
            -my-portlet
                -src/main/resources/META-INF/resources/
        -themes
            -my-theme
                -src/js/

我主题的Webpack文件（在我的主题文件夹中）：

var path = require('path');
var webpack = require('webpack');

var REACT_DIR = path.resolve(__dirname, 'src/js/react');
var JS_DIR = path.resolve(__dirname, 'src/js/');

module.exports = {
    entry: {
        bundle: [
            path.resolve(REACT_DIR, 'Bootstrap.js'),
            path.resolve(JS_DIR, 'Utility.js')
        ],
        vendor: [
            'react',
            'react-dom',
            'react-addons-css-transition-group',
            'react-animate-height',
            'react-google-maps',
            'react-overlays',
            'react-redux',
            'react-scroll',
            'react-sticky',
            'redux',
            'redux-thunk',
            'shortid'
        ]
    },
    module: {
        loaders: [
            {
                include: [
                    path.resolve(JS_DIR)
                ],
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
    output: {
        filename: '[name].js',
        path: path.resolve(REACT_DIR, 'dist'),
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js', Infinity)
    ],
    devtool: 'inline-source-map'
};

我的portlet的webpack（在我的portlet文件夹中）：

var path = require('path');
var webpack = require('webpack');

var JS_SRC = path.resolve(__dirname, 'src/main/resources/META-INF/resources/js/src/');

module.exports = {
    entry: [
        path.resolve(JS_SRC, 'main.js') // Your appʼs entry point
    ],
    module: {
        loaders: [
            {
                test:    /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: ['babel'],
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
    externals: {
        // Use external version of React
        'react': 'React',
        'react-dom': 'ReactDOM',
    },
    output: {
        filename: 'bundle.js',
        path: './src/main/resources/META-INF/resources/js/dist'
    }
};

用于java portlet开发的Webpack代码拆分

0 个答案: