如何使用 babel 和 webpack 为你设置一个 react/node 项目？答案

【问题标题】：how to set u a react/node project with babel and webpack?如何使用 babel 和 webpack 为你设置一个 react/node 项目？
【发布时间】：2018-06-10 14:51:51
【问题描述】：

我正在尝试使用 babel 和 webpack 设置一个新的 react 项目，但它不起作用。这是我的 webpack.dev.config.js 文件：

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

var parentDir = path.join(__dirname, '../');

module.exports = {
    entry: [
        path.join(parentDir, '/react_components/index.js')
    ],
    module: {
        loaders: [{
            test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                  }
            }
        ]
    },
    output: {
        path: parentDir + '/html',
        filename: 'main.js'
    },
    devServer: {
        contentBase: parentDir,
        historyApiFallback: true
    }
}

这是我项目的屏幕截图：

我收到 webpack 编译成功但 main.js 文件仍然为空的消息

PS：我正在使用本教程

https://medium.com/netscape/setting-up-a-react-project-from-scratch-d62f38ab6d97

【问题讨论】：

标签： javascript node.js reactjs webpack babeljs

【解决方案1】：

打开 package.json 文件。在脚本里面添加"build": "webpack"

您的脚本对象应该看起来像这样：

"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server --hot", "build":"webpack" }

然后在您的终端上运行npm run build。

【讨论】：

同意。将有一个两步过程。先用 webpack 打包，然后在单独的终端启动服务器。
正如@RudolphTheCat 所说，webpack-dev-server 不会写入磁盘，而是从内存中提供服务。所以当你运行 webpack-dev-server 时，main.js 不会被更新，因为它不是必需的。仅出于生产目的，您需要 main.js。
如果您只是想查看 main.js 文件，您可以在 chrome 开发工具中查看。

【解决方案2】：

尝试在项目目录中运行node node_modules\webpack\bin\webpack.js，它应该会构建一个物理 main.js 文件。

webpack-dev-server 不写入磁盘。它服务于结果凭记忆。

来源：https://github.com/webpack/webpack-dev-server/issues/24

【讨论】：