首页 > webpakc react hmr 代码热替换遇到的问题

webpakc react hmr 代码热替换遇到的问题

最近按照 这篇文章 准备做个小东西。然而开发环境搭了一天,在代码热替换遇到了问题,希望各位大神指导一下

出现的问题是这样的:

那篇文章中说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加上也好了。。。不知道为什么

【热门文章】
【热门文章】