为 React 配置 Webpack答案

【问题标题】：Configuring Webpack for React为 React 配置 Webpack
【发布时间】：2018-03-08 01:40:33
【问题描述】：

我正在尝试从头开始创建一个 Reactjs 项目。我听说使用create-react-app 更容易。我还被告知 standard industry practise 是使用 webpack 来引导你的 React 项目。

我已经创建了我的 webpack 配置文件，如下所示：

const path = require('path');

const DIST_DIR = path.resolve(__dirname, "dist");
const SOURCE_DIR = path.resolve(__dirname, "src");

const config = {
    entry: SOURCE_DIR + "/app/app.js",
    output: {
        path: DIST_DIR + '/app',
        filename: 'bundle.js',
        publicPath: '/app/'
    },
    module: {
        loaders: [
            {
                test: "/\.js?/",
                include: SOURCE_DIR,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-2']
                }
            }
        ]
    }
};

module.exports = config;

我已经添加了 build 和 build:prod 脚本，以便在 devt 和生产模式下运行：

{
   "name": "basics",
   "version": "1.0.0",
   "description": "",
   "main": "app.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "start": "webpack-dev-server",
      "build": "webpack -d && copy src/index.html dist/index.html && 
               webpack-dev-server --content-base: src/ --inline --hot",
   "build:prod": "webpack -p && copy src/index.html dist/index.html"
  },
  "keywords": [
     "React",
     "JavaScript",
     "Front End"
  ],
 "author": "MIT",
 "license": "ISC",
 "dependencies": {
     "react": "^16.2.0",
     "react-dom": "^16.2.0"
    },
"devDependencies": {
    "@babel/preset-env": "^7.0.0-beta.40",
    "@babel/preset-react": "^7.0.0-beta.40",
    "@babel/preset-stage-2": "^7.0.0-beta.40",
    "babel-loader": "^7.1.4",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.10",
    "webpack-dev-server": "^3.1.0"
   }
}

当我运行 npm start 时，应用程序崩溃并且我在控制台中收到此错误：

  Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. These properties are valid:
 object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, 
 exprContextRequest?, noParse?, rules?, defaultRules?, 
 unknownContextCritical?, unknownContextRecursive?,
 unknownContextRegExp?, unknownContextRequest?, unsafeCache?, 
 wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, 
 strictExportPresence?, strictThisContextOnImports? }
  -> Options affecting the normal modules (`NormalModuleFactory`).
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! basics@1.0.0 build: `webpack -d && cp src/index.html 
dist/index.html && webpack-dev-server --content-base: src/ --inline --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the basics@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional 
logging output above.

我认为错误出现在我正在执行copy 的构建脚本中，但我不能确定这是我第一次使用 webpack。有人可以帮我解决这个问题吗？谢谢。

【问题讨论】：

我绝对推荐使用 create-react-app 来启动一个新项目。它一开始就为您提供了可靠的 webpack 配置。如果您遇到需要支持但不需要支持的内容，您可以随时弹出并添加它。

标签： reactjs webpack

【解决方案1】：

您想使用rules 而不是加载器。该信息在错误中。它会告诉您什么是有效属性。

来自 webpack 文档 https://webpack.js.org/concepts/loaders/

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

所以对你来说：

module: {
    rules: [
        {
            test: "/\.js?/",
            include: SOURCE_DIR,
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015', 'stage-2']
            }
        }
    ]
}

【讨论】：

对不起。我应该在这里改变什么？
而不是你现在拥有的模块 -> 加载器，你想做module -> rules。把它想象成你的模块有一个规则列表，每个规则都有一个测试并且可以有 loader/loaders
谢谢。它现在正在构建。你能告诉我使用 webpack-cli -D 的重要性吗？

【解决方案2】：

Create-react-app 是最简单的选择，但如果你真的想了解一切是如何在幕后设置的，你可能想从头开始使用 Webpack、Babel 和 React 构建一个简单的应用程序。这就是我所做的。

或者您可以阅读我的教程以节省一些时间。 Webpack, Babel, React, Redux, Apollo. From scratch to the production stack.

【讨论】：