在 webpack 2 中配置 HotModuleReplacement 时出现问题

Question

我正在尝试集成HotModuleReplacement并遵循此样板，但不适用于我的webpack配置。

我遇到的"问题"在output.publicPath条目中。按照我提到的例子，该行是">HMR 知道在哪里加载热更新块所必需的"，但是当我将其包含在我的 webpack 配置中时，它会GET http://localhost:3000/ 404 (Not Found)给我此错误。如果我不包含它，webpack 会成功编译所有内容，但 HMR 不起作用，即使当我查看控制台时我得到这个

[WDS] App hot update...
dev-server.js:45 [HMR] Checking for updates on the server...
log-apply-result.js:20 [HMR] Updated modules:
log-apply-result.js:22 [HMR]  - ./src/components/App.js
dev-server.js:27 [HMR] App is up to date.

下面是webpack.config.js文件。

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './src/index.js'
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/static/'
  },
  devtool: 'inline-source-map',
  module: {
    rules: [
      { test: /.(js)$/, exclude: /node_modules/, use: ['react-hot-loader/webpack', 'babel-loader'] },
      { test: /.css$/, use: [ 'style-loader', 'css-loader' ] },
      { test: /.(png|jpg)$/, loader: 'file-loader?name=images/[name].[hash].[ext]' },
            { test: /.woff(?v=d+.d+.d+)?$/, loader: 'file-loader?name=fonts/[name].[hash].[ext]&mimetype=application/font-woff'},
            { test: /.woff2(?v=d+.d+.d+)?$/,loader: 'file-loader?name=fonts/[name].[hash].[ext]&mimetype=application/font-woff'},
            { test: /.ttf(?v=d+.d+.d+)?$/, loader: 'file-loader?name=fonts/[name].[hash].[ext]&mimetype=application/octet-stream'},
            { test: /.eot(?v=d+.d+.d+)?$/, loader: 'file-loader?name=fonts/[name].[hash].[ext]'},
            { test: /.svg(?v=d+.d+.d+)?$/, loader: 'file-loader?name=images/[name].[hash].[ext]&mimetype=image/svg+xml' }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new HtmlWebpackPlugin({ template: 'public/index.html', favicon: 'public/favicon.ico' })
  ],
  devServer: {
    host: 'localhost',
    port: 3000,
    historyApiFallback: true,
    hot: true
  }
}

我错过了什么？

这些是我的项目依赖项，以防万一

  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-prop-types": "^0.4.0",
    "semantic-ui-css": "^2.2.10",
    "semantic-ui-react": "^0.68.3"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-env": "^1.4.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "css-loader": "^0.28.1",
    "file-loader": "^0.11.1",
    "html-webpack-plugin": "^2.28.0",
    "react-hot-loader": "next",
    "style-loader": "^0.17.0",
    "webpack": "^2.5.1",
    "webpack-dev-server": "^2.4.5"
  }

编辑

我让它工作了。我将publicPath更改为publicPath: '/'并将{"modules": false}添加到我的.babelrc文件中

以下是我的.babelrc文件

{
  "presets": [["env",{"modules": false}], "react", "stage-1"]
}

我想我有一个新的问题，{"modules": false}是什么意思？它的用途是什么？

Answer 1

.babelrc 是 babel 转译器的配置。

"将其设置为 false 不会转换模块。">

来源： https://babeljs.io/docs/plugins/preset-es2015/#options