首页 > react+webpack开发中webpack-dev-server无法正常使用?

react+webpack开发中webpack-dev-server无法正常使用?

在使用命令webpack-dev-server --hot之后,代码依然是根据build的结果来,没法实现实时更新,刷新之后也是,每次更改都要build一遍。请问有什么方法吗?

PS:有用到react-hot-loader,按照gituhb的步骤加上去之后没什么效果,我初学者也不太清楚它的作用……

问题更新:

我尝试加上了babel的transform-runtime插件,然后命令行出现了这种情况,页面渲染也失败了,如何解决?

//.babelrc
{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false
}
//webpack.config.js
var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: [
    'webpack-dev-server/client?http://0.0.0.0:8080', // WebpackDevServer host and port
    'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
    './src/main.js'
  ],
  output: {
    path: path.resolve(__dirname, './dist/'),
    publicpath: '/dist/',
    filename: 'build.js'   
  },
  resolveLoader: {
    root: path.join(__dirname, 'node_modules')
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['react-hot','babel'],
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        loader: 'url',
        query: {
          limit: 8192,
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: 'eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = 'source-map';
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.optimize.OccurenceOrderPlugin()
  ])
}

我怀疑你是在本地直接访问index.html 和build 之后的js,这样webpack-dev-server是无法起作用的;启动webpack-dev-server后是要去localhost:8080那访问的,你的更改只会同步到这个地址上,webpack-dev-server不会自动帮你生成build文件的。

PS:一般来说,webpack 的配置文件分两份,一份是开发时给webpack-dev-server 用;一份是build 的时候给webpack 用。

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