React Hot Loader 3 с Webpack и в производстве

Question

Я использую Webpack и React Hot Loader v3. В разработке он работает в основном, как и ожидалось. Тем не менее, я ожидал, что функция hotloading быть отключено при выводе статического файла связки с

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(), но та же ошибка все еще происходит. Любые идеи о том, что мне здесь не хватает?

Answer 1

Вам нужны отдельные производственных конфигурации, которая не включает в себя сервер Dev или горячий загрузчик в запись. Ниже приведена упрощенная версия моей конфигурации 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) 

Answer 2

Как избавиться от 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' 
],