最近按照 这篇文章 准备做个小东西。然而开发环境搭了一天,在代码热替换遇到了问题,希望各位大神指导一下
出现的问题是这样的:
那篇文章中说hot-reload已经过时,查了些资料确实如此。然后就按照文章中的做。
这里是我的package.json
"devDependencies": {
"babel-core": "^6.5.2",
"babel-loader": "^6.2.3",
"babel-plugin-react-transform": "^2.0.0",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.0",
"chai": "^3.5.0",
"cross-env": "^1.0.7",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^2.9.0",
"karma": "^0.13.21",
"karma-phantomjs-launcher": "^1.0.0",
"karma-webpack": "^1.7.0",
"phantomjs": "^2.1.3",
"phantomjs-prebuilt": "^2.1.4",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.2",
"redbox-react": "^1.2.2",
"style-loader": "^0.13.0",
"stylus-loader": "^1.5.1",
"supertest": "^1.2.0",
"supervisor": "^0.9.1",
"url-loader": "^0.5.7",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"hapi": "^13.0.0",
"react": "^0.14.7",
"react-addons-css-transition-group": "^0.14.7",
"react-dom": "^0.14.7",
"react-redux": "^4.4.0",
"whatwg-fetch": "^0.11.0"
}
.babelrc:
{
"presets": ["react", "es2015"],
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}
webpack.config.js
'use strict'
const path = require('path')
const webpack = require('webpack')
const HtmlwebpackPlugin = require('html-webpack-plugin')
const ROOT_PATH = path.resolve(__dirname, '../')
const APP_PATH = path.resolve(ROOT_PATH, 'app')
const SRC_PATH = path.resolve(ROOT_PATH, 'src')
const BUILD_PATH = path.resolve(ROOT_PATH, 'app/dist')
module.exports= {
entry: {
app: path.resolve(SRC_PATH, 'app.js')
},
output: {
path: BUILD_PATH,
filename: '[name].bundle.js',
publicPath: '../app/dist/',
},
devtool: 'eval-source-map',
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel',
include: SRC_PATH,
query: {
"presets": ["react", "es2015"]
}
},{
test: /\.png$/,
loader: "url-loader",
exclude: /node_modules/,
query: { mimetype: "image/png" }
}]
},
plugins: [
new HtmlwebpackPlugin({
title: 'title is here'
}),
new webpack.optimize.CommonsChunkPlugin('vendors.js'),
]
}
还有script:
"scripts": {
"dev": "webpack-dev-server --process --profile --colors --hot --inline --devtool eval --config webpack/webpack.config.js",
"build": "webpack -p --process --colors --profile --config webpack/webpack.pro.config.js",
"test": "mocha"
}
环境windows 10
node: 5.7.0
npm3 和 cnpm 都试过,错误依旧。
提示信息说用babel的env来禁用hmr。可是我在.babelrc已经写过了。并不知道问题在哪里,希望大神帮忙看下
找到问题了,开webpack-dev-server的时候不能用--inline参数,
然后我又把inline加上也好了。。。不知道为什么