2

我已经在 ReactJS 上工作了一段时间，我接触过很多模块生态系统（Webpack、Babel、React）等。

我对webpack配置有一些了解，我已经完成了基本配置。见下文

const Path = require('path');
const Webpack = require('webpack');
const envs = require('../utils/env');
const Possibles = envs.possibles;

const NODE_ENV = process.env.NODE_ENV;

const miniOps = {
  development: Possibles.dev.indexOf(NODE_ENV) > -1,
  production: Possibles.prod.indexOf(NODE_ENV) > -1
};

const configuration = {
  target: 'web',
  output: {
    path: Path.join(__dirname, '..', 'public'),
    filename: 'bundle.js',
    publicPath: '/assets/'
  },
  module: {
    loaders: []
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  plugins: [
    new Webpack.DefinePlugin({ NODE_ENV: JSON.stringify(NODE_ENV) })
  ]
};

if (miniOps.development) {
  configuration.resolve.alias = {};
  configuration.module.noParse = [];

  configuration.cache = true;
  configuration.devtool = 'cheap-eval-source-map';

  configuration.entry = [
    Path.join(__dirname, '..', 'app/main.js')
  ];

  const minideps = [
    'react/dist/react.min.js'
  ];

  const NODE_MODULES_DIR = Path.join(__dirname, '..', 'node_modules');

  minideps.forEach(dep => {
    const depPath = Path.resolve(NODE_MODULES_DIR, dep);
    configuration.resolve.alias[dep.split(Path.sep)[0]] = depPath;
    configuration.module.noParse.push(depPath);
  });

  configuration.plugins.push(
    new Webpack.optimize.OccurenceOrderPlugin(),
    new Webpack.NoErrorsPlugin(),
    new Webpack.HotModuleReplacementPlugin()
  );

  configuration.module.loaders.push({
    test: Path.resolve(NODE_MODULES_DIR, minideps[0]),
    loader: 'expose?React'
  });

  configuration.module.loaders.push({
    test: /\.(js|jsx)$/,
    include: Path.join(__dirname, '..', 'app'),
    exclude: /node_modules/,
    loader: 'babel',
    query: {
      cacheDirectory: true
    }
  });
}

if (miniOps.production) {
  configuration.entry = {
    app: [
      Path.join(__dirname, '..', 'app/main.js')
    ],
    vendor: ['react']
  };

  configuration.output.path = Path.join(__dirname, '..', 'dist');

  configuration.module.loaders.push({
    test: /\.(js|jsx)$/,
    include: Path.join(__dirname, '..', 'app'),
    exclude: /node_modules/,
    loader: 'babel'
  });

  configuration.plugins.push(
    new Webpack.optimize.UglifyJsPlugin({
      compress: {
        unused: true,
        dead_code: true,
        warnings: false,
        screw_ie8: true
      }
    })
  );

  configuration.plugins.push(
    new Webpack.optimize.OccurrenceOrderPlugin(),
    new Webpack.optimize.DedupePlugin(),
    new Webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js')
  );
}

console.log(`Bundling modules...... NODE_ENV: ${NODE_ENV}`);

module.exports = configuration;

babelrc 配置是，

{
  "presets": ["es2015", "react"],
  "env": {
    "development": {
      "plugins": [
        [ "transform-runtime" ],
        [
          "react-transform", {
            "transforms": [
              {
                "transform": "react-transform-hmr",
                "imports": ["react"],
                "locals": ["module"]
              },
              {
                "transform": "react-transform-catch-errors",
                "imports": ["react", "redbox-react"]
              }
            ]
          }
        ]
      ]
    }
  }
}

我计划不使用 dev-server，而是计划编写在 Hapi.JS 上运行的 Webserver。

问题：

  1. 现在我正在使用react-transform-hmr。我需要使用 webpack-dev-middleware 和 webpack-hot-middleware 吗？
  2. 我应该如何实现/连接 react-transform-hmr 与我的 Hapi 网络服务器？
  3. 如果我要使用这个插件再次使用 webpack-dev-server 和 webpack-hot-middleware

https://www.npmjs.com/package/hapi-webpack-plugin

那么react-transform-hmr 有什么用呢？

& 我看到其中一个样板也在使用这个

https://github.com/Dindaleon/hapi-react-starter-kit/blob/master/webpack/hapiWebpack.js

  1. 有人能解释一下 webpack-hot-middleware,webpack-dev-middleware,babel-transform-hmr 的用途吗？
4

0 回答 0