11

( )webpackを使用して問題なく動作するビルドに使用していますが、製品ビルド ( ) を作成しようとすると、Web サイトを読み込もうとするとコンソールにエラーが表示され、何も表示されないようです。画面上で。webpack-dev-servernpm run watchnpm run build

不明なエラー: [HMR] ホット モジュール交換が無効になっています。

これについていくつか質問があります。

  1. 使用についての私の理解は、Hot Module Replacement開発中の生活を楽にするために設計されており、本番環境で使用するべきではないということです。あれは正しいですか？

  2. 以下を考えると、なぜ がHot Module Replacement使用されているのですか? 何がそれを動かしているのかわかりません。

  3. 製品ビルドに関しては、ベスト プラクティスは何ですか?製品用と開発用に別々の構成webpackを用意する必要がありますか? 理想的には、メンテナンスを容易にするために、単一の構成を使用したいと考えています。

パッケージ.json

{
  // ...
  "scripts": {
    "build": "webpack --progress --colors --production",
    "watch": "webpack-dev-server --inline --hot --progress --colors"
  },
  "dependencies": {
    "bootstrap": "^3.3.6",
    "bootstrap-sass": "^3.3.6",
    "bootstrap-webpack": "0.0.5",
    "extract-text-webpack-plugin": "^1.0.1",
    "html-webpack-plugin": "^2.15.0",
    "jquery": "^2.2.3",
    "node-sass": "^3.4.2",
    "react": "^15.0.1",
    "react-bootstrap": "^0.28.5",
    "react-dom": "^15.0.1",
    "react-redux": "^4.4.1",
    "react-router": "^2.0.1",
    "react-router-redux": "^4.0.1",
    "redux": "^3.3.1",
    "redux-thunk": "^2.0.1",
    "webpack": "^1.12.14"
  },
  "devDependencies": {
    "babel-core": "^6.7.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "css-loader": "^0.23.1",
    "exports-loader": "^0.6.3",
    "file-loader": "^0.8.5",
    "imports-loader": "^0.6.5",
    "less": "^2.6.1",
    "less-loader": "^2.2.3",
    "redux-devtools": "^3.2.0",
    "redux-logger": "^2.6.1",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js

var webpack = require('webpack');
var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = {
    entry: [
        'webpack/hot/only-dev-server',
        path.resolve(__dirname, 'app/index.js')
    ],
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: [ 'es2015', 'react' ] } },
            { test: /\.scss$/, loader: 'style!css!sass?includePaths[]=' + path.resolve(__dirname, './node_modules/bootstrap-sass/assets/stylesheets/') },
            { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: 'file' }
        ]
    },
    resolve: {
        modulesDirectories: ['node_modules']
    },
    plugins: [
        new webpack.NoErrorsPlugin(),
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: './index.html',
            inject: false
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new webpack.optimize.OccurenceOrderPlugin()
    ]
};
4

4 に答える 4

1

本番ビルドにホット ローディング ビットを含めることは、特に良い考えではありません。それらは実際には役に立たず、ファイルサイズを肥大化させるだけです.

これに対処する方法については、複数の戦略があります。一部の人々は、ファイルごとに webpack 構成を分離し、--config. 単一のファイルを維持し、npm を介して分岐することを好みます。ブランチ間で構成を共有するためにwebpack-mergeを使用します (免責事項: 私は作成者です)。

于 2016-04-10T09:20:49.133 に答える