使用 Webpack 进行热加载并使用 ReactJs ES6 生成物理文件答案

【问题标题】：Using Webpack for hot-loader and generating a physical file w/ ReactJs ES6使用 Webpack 进行热加载并使用 ReactJs ES6 生成物理文件
【发布时间】：2015-07-01 22:29:35
【问题描述】：

我有一个 ReactJs ES6（即“导入”关键字）应用程序，它使用 gulp 生成物理构建文件和 webpack 将更改热加载到虚拟文件。我想将这两个服务与 npm start （当前加载 webpack，而不是 gulp）结合起来。

server.js 文件

 var webpack = require('webpack');
 var WebpackDevServer = require('webpack-dev-server');
 var config = require('./webpack.config');

 new WebpackDevServer(webpack(config), {
   publicPath: config.output.publicPath,
   hot: true,
   historyApiFallback: true
 }).listen(3000, 'localhost', function (err, result) {
   if (err) {
     console.log(err);
   }

   console.log('Listening at localhost:3000');
 });

webpack.config.js 文件

 var path = require('path');
 var webpack = require('webpack');

 module.exports = {
   devtool: 'eval',
   entry: [
     'webpack-dev-server/client?http://localhost:3000',
     'webpack/hot/only-dev-server',
     './src/index.js'
   ],
   output: {
       filename: 'bundle.js',
       path: path.join(__dirname, 'build'),
       publicPath: '/static/'
   },

   plugins: [
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin()
   ],
   resolve: {
     extensions: ['', '.js', '.jsx']
   },
   module: {
     loaders: [{
       test: /\.jsx?$/,
       loaders: ['react-hot', 'babel-loader'],
       include: path.join(__dirname, 'src'),
       exclude: /node_modules/
     },
       { test: /\.css$/, loader: 'style-loader!css-loader' }
     ]
   }
 };

我认为基于 webpack 的输出部分，webpack 会在我的 build 文件夹中生成一个物理文件，同时在 '/static/bundle.js' 中创建一个虚拟文件

目前，带有 hot-loader 的虚拟文件正在工作，但“构建”路径中没有构建物理文件。

我是否正确地认为 webpack 可以替换 gulp 并生成物理和虚拟构建文件？如果是这样，就创建物理构建文件而言，我的代码在哪里出错？

提前致谢。

【问题讨论】：

标签： reactjs gulp webpack

【解决方案1】：

解决方案：

我的代码很好，我需要在 package.json 中添加到我的脚本中：

 .....
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"gulp": "gulp",
"all":  "npm run build && npm run gulp"
 .....

然后我运行“npm run all”，我可以从一个命令运行 webpack 和 gulp

【讨论】：