Webpack，babelrc动态导入无效

Question

我花了相当长的时间试图自己解决这个问题，但我在这里，除了向社区寻求一些指导之外，没有更多的选择需要考虑。

我试图在原则上做一些非常简单的事情，用WebPack动态导入组件，使用ES6模块和babelrc。

我有以下应用程序架构：

-root - root/.webpack.dev.js - root/.webpack.prod.js -root/..babelrc -根/Package.json -根/节点_模块/ -根/区/区 - root/src/ - root/src/index.js -根/src/模块/ -根/src/模块/module1.js -根/src/模块/module2.js -根/src/模块/module3.js -根/src/模块/模组4.js -根/src/模块/模组5.js

在module1.js (非实名)中，我使用以下代码动态导入module2.js：

  async function load(configObject) {
  const {
      init,
      requestPermissions
  } = await import( /* webpackChunkName: "chunkname" */ `./module2.js`)
  init(configObject)
  _namespace.requestPermissions = requestPermissions;

}

我的.babelrc文件：

   {
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead"
    }]
  ],
  "plugins": ["@babel/plugin-syntax-dynamic-import",
    ["@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ],
  ],
  "comments": true
}

// "@babel/preset-env"

我的Webpack配置：

const path = require('path');
const webpack = require('webpack')
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin
const WorkboxPlugin = require('workbox-webpack-plugin');
const {
  InjectManifest
} = require('workbox-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');


module.exports = {
  entry: {
    lib: "./src/index.js"
  },
  mode: 'development',
  module: {
    rules: [{
      test: /\.js$/,
      use: [{
        loader: "babel-loader"
      }],
      exclude: /node_modules/
    }]
  },
  optimization: {
    minimizer: [new TerserPlugin({
      test: /\.js(\?.*)?$/i,
      parallel: true,
      cache: true,
      terserOptions: {
        ecma: 8,
        warnings: false,
        parse: {
          ecma: 8,
        },
        compress: {
          warnings: false,
          comparisons: false,
        },
        mangle: {
          safari10: true,
        }, 
        module: false,
        output: {
          ecma: 5,
          comments: false,
          ascii_only: true,
        },
        toplevel: false,
        nameCache: null,
        ie8: false,
        keep_classnames: undefined,
        keep_fnames: false,
        safari10: false,
      },
    })],
  },
  output: {
    filename: '[name].js',
    chunkFilename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: "/"
  },
  devServer: {
    contentBase: "dist",
    compress: true,
    stats: {
      colors: true
    },
    overlay: true
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('development'),
        'API_URL': JSON.stringify('ENDPOINT')

      }
    }),
    new BundleAnalyzerPlugin({
      generateStatsFile: true
    }),
    new WorkboxPlugin.GenerateSW({
      "swDest": "firebase-messaging-sw.js",
    }),
    new InjectManifest({
      "swSrc": path.join('src', 'firebase-messaging-sw.js')
    })
  ]
};

我的package.json：

{
  "name": "refactor",
  "version": "1.0.0",
  "description": "",
  "main": "backuprefacto.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "NODE_ENV=production webpack --config=webpack.prod.js",
    "build:dev": "webpack --config=webpack.dev.js",
    "start": "webpack-dev-server --config=webpack.dev.js"
  },
  "keywords": [],
  "private": true,
  "license": "ISC",
  "devDependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.5.5",
    "babel-loader": "^8.0.6",
    "babel-minify": "^0.5.1",
    "babel-minify-webpack-plugin": "^0.3.1",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "terser-webpack-plugin": "^1.4.1",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.39.2",
    "webpack-bundle-analyzer": "^3.4.1",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0",
    "workbox-webpack-plugin": "^4.3.1"
  },
  "dependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/runtime": "^7.5.5",
    "firebase": "^6.4.0",
    "save": "^2.4.0"
  }
}

我检查了我的所有模块，它们都没有期望模块1.js调用module2.js。我还探讨了webpack的评论被巴贝尔删除的选择，并因此添加了一条评论:为了确保webpackChunkName不会被删除，但最终，唯一能建立起来的东西是我的lib.js，而不是我期望的lib.bundle.js。

我还尝试删除所有的TerserPlugin位，以检查这是否会产生相同的影响，但是没有什么改变。

在需要时，我所要寻找的只是在调用模块2.js时加载它，因此我期望有一个新的网络请求来实现这一点。

Answer 1

实际上，如果您想使用动态导入，您需要首先确保在顶部没有导入模块.

在module1.js中，我导入了两次，一次是在顶部，一次是“常规方式”，一次是动态方式，这显然导致了module2.js被持续加载。

Answer 2

我通过修改.babelrc模块: false来解决我的问题

["@babel/preset-env", {
        "loose": true,
        "useBuiltIns": "usage",
        "corejs": 3,
        "modules": false
      }],