为什么热模块更换在Webpack开发服务器上停止工作?
我的 package.json 文件:
{
"name": "routing-react",
"version": "1.0.0",
"description": "Just a little ReactJS Training Ground",
"main": "index.js",
"scripts": {
"start": "npm run build",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot",
"build:prod": "cp src/index.html dist/index.html && webpack -p"
},
"keywords": [
"react"
],
"author": "gd10",
"license": "MIT",
"dependencies": {
"css-loader": "^0.28.9",
"react": "^15.1.0",
"react-dom": "^15.1.0",
"react-hot-loader": "^3.1.3",
"style-loader": "^0.20.1",
"webpack-hot-middleware": "^2.21.0"
},
"devDependencies": {
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-2": "^6.11.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
我也有设定:
devserver = {
historyApiFallback: true,
inline: true,
hot: true
}
但这并没有帮助。
- webpack.config.js * 文件:
var webpack = require('webpack');
var path = require('path');
var DIST_DIR = path.resolve(__dirname, 'dist');
var SRC_DIR = path.resolve(__dirname, 'src');
var config = {
devServer: {
historyApiFallback: true,
contentBase: './',
inline: true,
hot:true,
port: 3004,
},
entry: SRC_DIR + '/app/index.js',
output: {
path: DIST_DIR + '/app',
filename: 'bundle.js',
publicPath: '/app/'
},
module: {
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-2']
}
},
{
test: /\.css?/,
loader:'style-loader!css-loader'
},
]
}
};
module.exports = config;
以前我有CSS加载程序的问题,在 webpack.config.js 中添加加载程序后,我得到了webpack停止。我如何才能使热模块工作?
1条答案
按热度按时间fumotvh31#
您需要激活模块热更换插件,完整说明:https://webpack.js.org/guides/hot-module-replacement/