webpack使用

[klouskingsley]

hot module replacement 热替换（react版本）

• 使用模块
  [webpack-dev-server]、[react-hot-loader]
• loader配置

 {
  test: /\.jsx$/,
  loaders: ['react-hot', 'babel?plugins[]=transform-runtime&presets[]=es2015&presets[]=stage-0&presets[]=react']
 },

• 注意事项，react 0.14版本需要在jsx源文件底下添加如下代码，参考链接

if (module.hot){
  module.hot.accept()
}

• webpack命令

webpack-dev-server --inline --hot --progress --port 8080

• 注意
  如果在docker下执行需要添加 --port 0.0.0.0

• 如果不想在每个jsx源文件下加module.hot.accept()可以使用react-transform-hmr

  • .babelrc

{
  "presets": ["es2015", "stage-0", "react"],
  "env": {
    // only enable it when process.env.NODE_ENV is 'development' or undefined
    "development": {
      "plugins": ["transform-runtime", ["react-transform", {
        "transforms": [{
          "transform": "react-transform-hmr",
          // if you use React Native, pass "react-native" instead:
          "imports": ["react"],
          // this is important for Webpack HMR:
          "locals": ["module"]
        }]
        // note: you can put more transforms into array
        // this is just one of them!
      }]]
    }
  }
}

• loader

{test: /\.jsx$/, loader: 'babel'}

[klouskingsley]

webpack 1.13 在babel生成source-map的时候有个bug，除了'source-map'之外其他的在浏览器上都看不到source文件，需要升级到1.14 stackoverflow