0

我正在尝试集成 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}意思？它是用来做什么的？

4

1 回答 1

0

.babelrc 是 babel 转译器的配置。

“将此设置为 false 不会转换模块。”。

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

于 2017-05-14T22:21:13.360 回答