基于类函数构建模块构建失败

Question

我之前使用的是“create-react-app”的默认脚本，但项目的要求需要我使用 WebPack 4，所以我需要创建脚本并在我的 package.json 中添加额外的 Babel/Webpack。

现在，我一直在运行代码：

yarn run v1.19.0
$ webpack --optimize-minimize --config=webpack.min.config.js
Hash: 073756e9eb95ab8e967e
Version: webpack 4.41.0
Time: 46729ms
Built at: 10/29/2019 11:10:55 AM
 2 assets
Entrypoint main = app.bundle.min.js
[15] (webpack)/buildin/global.js 472 bytes {0} [built]
[36] (webpack)/buildin/harmony-module.js 573 bytes {0} [built]
[37] ./src/index.scss 698 KiB {0} [built]
[38] ./src/App.css 380 bytes {0} [built]
[56] ./src/index.js + 74 modules 191 KiB {0} [built]
     | ./src/index.js 590 bytes [built]
     | ./src/store.js 1 KiB [built]
     | ./src/serviceWorker.js 4.6 KiB [built]
     | ./src/App.js 6.4 KiB [built]
     | ./src/reducers/index.js 221 bytes [built]
     | ./src/actions/systemActions.js 1.78 KiB [built]
     | ./src/actions/types.js 833 bytes [built]
     | ./src/reducers/systemReducer.js 1.94 KiB [built]
     | ./src/reducers/partsReducer.js 2.17 KiB [built]
     | ./src/actions/partsActions.js 2.7 KiB [built]
     | ./src/reducers/initialState.js 855 bytes [built]
     |     + 64 hidden modules
    + 53 hidden modules

ERROR in ./src/components/CreateMCRStep1.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\src\components\CreateMCRStep1.js: Support for the experimental syntax 'classProperties' isn't currently enabled (182:38):

  180 |       }
  181 | 
> 182 |     externalComponentValidationCheck = (data, name) => {
      |                                      ^
  183 |     //   console.log("data - " + JSON.stringify(data.target.value))
  184 |     //   console.log("name - " + JSON.stringify(name))
  185 |     switch(name)

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
    at Object.raise (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:6420:17)
    at Object.expectPlugin (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:7778:18)
    at Object.parseClassProperty (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:11013:12)
    at Object.pushClassProperty (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10978:30)
    at Object.parseClassMemberWithIsStatic (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10917:14)
    at Object.parseClassMember (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10851:10)
    at withTopicForbiddingContext (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10806:14)
    at Object.withTopicForbiddingContext (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:9884:14)
    at Object.parseClassBody (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10783:10)
    at Object.parseClass (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10757:22)
    at Object.parseStatementContent (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10051:21)
    at Object.parseStatement (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10009:17)
    at Object.parseBlockOrModuleBlockBody (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10585:25)
    at Object.parseBlockBody (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10572:10)
    at Object.parseTopLevel (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:9940:10)
    at Object.parse (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:11447:17)
    at parse (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:11483:38)
    at parser (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\lib\transformation\normalize-file.js:168:34)
    at normalizeFile (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\lib\transformation\normalize-file.js:102:11)
    at runSync (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\lib\transformation\index.js:44:43)
    at runAsync (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\lib\transformation\index.js:35:14)
    at process.nextTick (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\lib\transform.js:34:34)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ ./src/components/CreateMCRPage.js 28:0-46 145:39-53
 @ ./src/App.js
 @ ./src/index.js

这至少发生在我的 5 个组件上，出于某种原因，它标记了我的类函数和回调。

目前这是我的 webpack.config.js

    var  path = require('path');
// const MiniCssExtractPlugin = require("mini-css-extract-plugin");


module.exports = {
    entry: './src/index.js',
    mode: 'production',
    output: {
        path: __dirname + './build',
        filename:'app.bundle.js'
    },
    module: {
        rules : [ {
            test: /\.js?$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets:['@babel/react']
                }
            }
        }, 
        {
            test: /\.(sa|sc|c)ss$/,
            use: [
                //    {
                //   // After all CSS loaders we use plugin to do his work.
                //   // It gets all transformed CSS and extracts it into separate
                //   // single bundled file
                //   loader: MiniCssExtractPlugin.loader
                //    }, 
                   {
                     loader: "css-loader"
                   },
                   {
                       // First we transform SASS to standard CSS
                       loader: "sass-loader",
                       options: {
                       implementation: require("sass")
                       }
                   },
                 ]
      },
      {
        // Now we apply rule for images
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
               {
                 // Using file-loader for these files
                 loader: "file-loader",

                 // In options we can set different things like format
                 // and directory to save
                 options: {
                   outputPath: 'images'
                 }
               }
             ]
      }]
    },
    // plugins: [ 
    //   new MiniCssExtractPlugin({
    //  filename: "bundle.css"
    //   })     
    // ]
};

我注释掉了我所有的 CSS 代码，因为我试图追踪我的配置中的哪个部分是问题所在。

我的 .babelrc 看起来像这样：

{
"presets": [
    "@babel/env",
    "@babel/react"
]
}

我已经尝试解决这个问题至少 4 个小时，并尝试了多种设置，但到目前为止没有任何效果。

Answer 1

显然我一直在用错误的措辞来表达我的问题，箭头函数是 Webpack 中的实际问题，而不是配置问题。

这解决了我的问题

Arrow Function syntax not working with webpack?