我尝试集成HotModuleReplacement和this样板文件，但是我的webpack配置无效。
＆＃34;问题＆＃34;我在output.publicPath条目中。按照我提到的示例，HMR知道在哪里加载热更新块＆＃34;这条线是＆＃34; ，但是当我将它包含在我的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}是什么意思？它用于什么？
答案 0 :(得分：0)
.babelrc是babel转换器的配置。
＆＃34;将此设置为false将不会转换模块。＆＃34;。