Webpack，React热更新和多个入口点

Question

Webpack，React热更新和多个入口点

4

我看到的所有例子在进行热模块替换时，都是将条目作为字符串数组。

如果你有多个条目，它是如何工作的呢？我尝试了下面的方法，但仍然得到了“未捕获的异常：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' })
    ]
}

- hunterc

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jim Skerritt · Accepted Answer

试试这个：

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配置与您的配置混合在一起。最大的区别在于入口文件对象的结构。我曾经为了多个入口文件而苦苦挣扎，但是通过不断尝试，我终于让它基本正常工作了。