babel动态导入的webpack.config.js配置

Question

我想在ReactJS中使用动态导入。我将这行代码添加到我的配置中，但它不起作用。可能是什么原因？它给出了使用npm运行生成的生成，但是它说：

Compiled successfully.

File sizes after gzip:

  568.04 KB  build/static/js/2.462ff6f6.chunk.js
  387.13 KB  build/static/js/main.ec5adb7d.chunk.js
  41.72 KB   build/static/css/2.2a6730c1.chunk.css
  3.46 KB    build/static/css/main.78d7887d.chunk.css
  1.66 KB    build/static/js/3.c903ea40.chunk.js
  1.16 KB    build/static/js/runtime~main.0ea0b8e7.js

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

Find out more about deployment here:

当我试图用命令运行它时：

npm run start:server

上面写着：

 Support for the experimental syntax 'dynamicImport' isn't currently enabled (20:45):

  18 | import { seoDataMap, idDataMap, LocDataMap, dataMap } from './data'
  19 | 
> 20 | const GoogleMapComponent = React.lazy(() => import('../../components/DynamicLandingPages/GoogleMapComponent.js'))

和：

pos: 1194,
  loc: Position { line: 20, column: 44 },
  missingPlugin: [ 'dynamicImport' ],
  code: 'BABEL_PARSE_ERROR'

这是我的配置：

{
            test: /\.(js|mjs|jsx|ts|tsx)$/,
            include: paths.appSrc,

            loader: require.resolve('babel-loader'),
            options: {
              customize: require.resolve(
                'babel-preset-react-app/webpack-overrides'
              ),

              plugins: [
                [
                  require.resolve('babel-plugin-named-asset-import'),
                  {
                    loaderMap: {
                      svg: {
                        ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
                      },
                    },
                  },
                ],
                "@babel/plugin-syntax-dynamic-import",
              ],
              cacheDirectory: true,
              // Save disk space when time isn't as important
              cacheCompression: true,
              compact: true,
            },
          },

那么，有什么问题呢？

Answer 1

plugin-syntax-dynamic-import：1-安装：npm install @babel/plugin-syntax-dynamic-import

2-创建一个.babelrc文件:并将其添加到其中：

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

Answer 2

对于有同样问题的人，我尝试创建.babelrc文件，然后运行npm构建。上面说有两个配置文件。然后，在我的例子中，babel驻留在package.json文件中。该错误指向package.json。然后我在我的package.json上做了这件事，它解决了所有的问题：

"babel": {
    "presets": [
      "@babel/env",
      "@babel/react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      [
        "babel-plugin-styled-components",
        {
          "displayName": true
        }
      ],
      "@babel/plugin-syntax-dynamic-import"
    ]
  },