React使用Webpack进行热加载3并在生产

问题描述：

我正在使用Webpack和React Hot Loader v3。在开发过程中，它大多按预期工作。不过，我期待hotloading功能与React使用Webpack进行热加载3并在生产

webpack --progress -p

但是我发现了，而不是重复这种错误时输出静态包文件时被禁用;

这是我的WebPack配置;

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

module.exports = { 
    devServer: { 
     publicPath: '/js/', 
     hot: false, 
     historyApiFallback: true, 
     port: process.env.PORT || 3000 
    }, 
    devtool: 'eval-source-map', 
    entry: [ 
     'react-hot-loader/patch', 
     'webpack-dev-server/client?http://localhost:3000', 
     'webpack/hot/only-dev-server', 
     './js/app/index' 
    ], 
    output: { 
     path: path.join(__dirname, '/web/js/'), 
     filename: 'bundle.js', 
     publicPath: '/js/' 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin() 
    ], 
    module: { 
     loaders: [ 
      { 
       test: /\.css$/, 
       loader: "style-loader!css-loader?modules", 
      }, 
      { 
       test: /\.js$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel', 
       query: { 
        presets: ['es2015', 'react', 'stage-0'], 
        plugins: ['transform-flow-strip-types'], 
        cacheDirectory: true 
       }, 
       include: path.join(__dirname, '/js/') 
      } 
     ] 
    } 
};

我得到了建议尝试禁用HotModuleReplacementPlugin()，但同样的错误仍然会发生。关于我在这里失踪的任何想法？

答

你需要一个独立的生产配置不包括在开发服务器或热装载机条目。请参阅下面的我的webpack配置的简化版本。如果应用运行的类似webpack -p，那么LAUNCH_COMMAND为production，并使用productionConfig。

但这只是一种方法。您也可以有一个单独的配置文件用于生产。类似于webpack.prod.config.js。然后代替运行webpack -p，您可以使用webpack -p --config webpack.prod.config.js指定生产配置。同样，您的生产配置不包括webpack-dev-server或hot-loader。

import webpack from 'webpack' 
import path from 'path' 
import HtmlWebpackPlugin from 'html-webpack-plugin' 

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: path.join(__dirname, '/app/index.html'), 
    filename: 'index.html', 
    inject: 'body', 
}) 

const PATHS = { 
    app: path.join(__dirname, 'app'), 
    build: path.join(__dirname, 'dist'), 
} 

const LAUNCH_COMMAND = process.env.npm_lifecycle_event 

const isProduction = LAUNCH_COMMAND === 'production' 
process.env.BABEL_ENV = LAUNCH_COMMAND 

const productionPlugin = new webpack.DefinePlugin({ 
    'process.env': { 
    NODE_ENV: JSON.stringify('production'), 
    }, 
}) 

const base = { 
    output: { 
    path: PATHS.build, 
    filename: 'index_bundle.js', 
    }, 
} 

const developmentConfig = { 
    entry: [ 
    'webpack-dev-server/client?http://localhost:8080', 
    'webpack/hot/only-dev-server', 
    './app/index', 
    ], 
} 

const productionConfig = { 
    entry: [ 
    './app/index', 
    ], 
} 

export default Object.assign({}, base, 
    isProduction === true ? productionConfig : developmentConfig)

答

除了除暴安良HotModuleReplacementPlugin，您还需要去掉多余的切入点：

// Current 
entry: [ 
    'react-hot-loader/patch', 
    'webpack-dev-server/client?http://localhost:3000', 
    'webpack/hot/only-dev-server', 
    './js/app/index' 
], 

// Fixed 
entry: [ 
    './js/app/index' 
],

React使用Webpack进行热加载3并在生产

相关推荐