当前位置 : 主页 > 网页制作 > React >

reactjs – Webpack,React热重新加载器和多个条目

来源:互联网 收集:自由互联 发布时间:2021-06-15
我所看到的所有示例都在进行热模块替换时将条目作为字符串数组. 当您有多个条目时,它如何工作?我尝试了以下操作但仍然获得了Uncaught异常:HMR已禁用消息. Webpack配置: module.expor
我所看到的所有示例都在进行热模块替换时将条目作为字符串数组.

当您有多个条目时,它如何工作?我尝试了以下操作但仍然获得了Uncaught异常: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' })
    ]
}
试试这个:

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配置,并混合了部分配置.最大的区别在于条目文件对象的结构.我努力让这个工作以及多个输入文件,我让它主要通过试验和错误工作.

网友评论