Webpack、React hot reloader 和多个条目

Question

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

当您有多个条目时，它是如何工作的？我尝试了以下方法，但仍然收到 Uncaught exception: HMR is disabled 消息。

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 配置，并混合在您的部分配置中。最大的区别在于入口文件对象的结构。我努力让它也适用于多个条目文件，我主要是通过反复试验让它工作的。

Webpack、React hot reloader 和多个条目

Webpack, React hot reloader and multiple entries

reactjs

webpack

webpack-dev-server