Webpack不会重新加载页面

npm run dev工作正常,但它不会重新加载页面进行更改时。 我也尝试使用localhost:8080/webpack-dev-server/index.html并且页面不再刷新。

我完全是NodeJS的新手,完全不知道如何解决这个问题。 我花了几个小时尝试不同的事情,因为这很困难,我差点stream泪。

文件夹结构:

 Project - node_modules - src - js - components - pages - client.min.js - index.html - package.json - package-lock.json - webpack.config.js 

的package.json:

 { "name": "react-tutorials", "version": "0.0.0", "description": "", "main": "webpack.config.js", "dependencies": { "babel-core": "^6.17.0", "babel-loader": "^6.2.0", "babel-plugin-add-module-exports": "^0.1.2", "babel-plugin-react-html-attrs": "^2.0.0", "babel-plugin-transform-class-properties": "^6.3.13", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", "babel-preset-stage-0": "^6.3.13", "history": "^1.17.0", "react": "^0.14.6", "react-dom": "^0.14.6", "react-router": "^1.0.3", "webpack": "^1.12.9", "webpack-dev-server": "^1.14.1" }, "devDependencies": {}, "scripts": { "dev": "webpack-dev-server --content-base src --inline --hot" }, "author": "", "license": "ISC" } 

webpack.config.js:

 var debug = process.env.NODE_ENV !== "production"; var webpack = require('webpack'); var path = require('path'); module.exports = { context: path.join(__dirname, "src"), devtool: debug ? "inline-sourcemap" : null, entry: "./js/client.js", module: { loaders: [ { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { presets: ['react', 'es2015', 'stage-0'], plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], } } ] }, output: { path: __dirname + "/src/", filename: "client.min.js" }, plugins: debug ? [] : [ new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin({mangle: false, sourcemap: false}), ], }; 

根据webpack中包含自动刷新的文档 ,您需要在命令行上指定--inline ,或者在devServer: { inline: true }指定devServer: { inline: true } 。 这将webpack-dev-server客户端入口点添加到webpackconfiguration中。

webpack-dev-serverconfiguration中没有inline: true标志,因为webpack-dev-server模块无法访问webpackconfiguration文件。 相反,您必须将webpack-dev-server客户端入口点添加到webpackconfiguration中。

要做到这一点,只需webpack-dev-server/client?http://your path:your port/到所有入口点。