reactjs - Webpack、React 热重载器和多个条目

Question

我见过的所有示例在进行热模块替换时都将条目作为字符串数组。

当您有多个条目时它如何工作？我尝试了以下操作，但仍然收到 未捕获的异常:HMR 已禁用 消息。

Webpack 配置:

module.exports = {
    context: path.join(staticPath, "js"),
    entry: {
        hot: 'webpack/hot/only-dev-server',
        main: './main.js',
        admin: './admin.js',
        vendor: './vendor.js',
        devServerClient: 'webpack-dev-server/client?http://localhost:4000'
    },

    output: {
        filename: "[name].bundle.js",
        path: path.join(staticPath, "js/"),
        publicPath: "http://localhost:4000/static/bundles/"
    },

    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loaders: ["react-hot", "babel-loader"] },
            { test: /\.json$/, loader: "json" }
        ]
    },

    resolve: {
        extensions: ['', '.js', '.json']
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin('shared', 'shared.bundle.js'),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new BundleTracker({ path: rootPath, filename: './webpack-stats.json' })
    ]
}

Answer 1

试试这个:

var publicPath = 'http://localhost:4000';

module.exports = {
    context: path.join(staticPath, "js"),
    entry: {
        entry1: [
            'webpack-dev-server/client?' + publicPath,
            'webpack/hot/only-dev-server',
            './index.js'
        ],
        entry2: [
            'webpack-dev-server/client?' + publicPath,
            'webpack/hot/only-dev-server',
            './index2.js'
        ],
        /* etc */
    },
    output: {
        filename: "[name].bundle.js",
        path: path.join(staticPath, "js/"),
        publicPath: publicPath + "/static/bundles/"
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['react-hot', 'babel-loader'],
            },
            /* other loaders */
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        /* other plugins */
    ],

    /* these are command line options */
    devServer: {
        port: 4000,
        hot: true
    }
};

我采用了用于热加载的 webpack 配置并混合在您的部分配置中。最大的区别在于入口文件对象的结构方式。我努力让这个方法也适用于多个条目文件，我主要是通过反复试验才让它工作的。