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()，但同樣的錯誤仍然會發生。關於我在這裏失蹤的任何想法？

來源

2016-06-01 Poyan

你需要一個獨立的生產配置不包括在開發服務器或熱裝載機條目。請參閱下面的我的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)

來源

2016-06-01 16:57:18 QualityDixon

除了除暴安良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' 
],

來源

2016-06-01 10:44:17

React使用Webpack進行熱加載3並在生產

回答

相關問題