我可以用作 webpack 配置的 es-modules 吗？答案

【问题标题】：Can I use as es-modules for webpack config?我可以用作 webpack 配置的 es-modules 吗？
【发布时间】：2020-04-11 22:07:11
【问题描述】：

我正在使用节点 13.4.0。带有 es 模块（通过 .mjs 扩展）。

使用 webpack 配置文件作为 es 模块崩溃：

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /path-to-config-dir/webpack.config.mjs

最简单的es模块webpack.config.mjs：

export default {};

webpack 是否支持配置文件的 es-modules？我找不到很多关于该主题的信息。我发现了这个（2019 年 6 月关闭的问题）：

https://github.com/webpack/webpack/pull/9226

所以我想知道关于 mjs 的 webpack 配置文件的状态。谁能给我指点这方面的一些文档？

【问题讨论】：

你有什么运气吗？
不，仍在使用 cjs 模块
感谢您的提问。有时在官方 webpack 文档中，你可能会发现一些用 es6 编写的 sn-ps，由于缺乏支持（而不是 node 或 webpack），这显然没有意义

标签： node.js webpack es6-modules

【解决方案1】：

我正在使用 Node v14.16.0 和 Webpack 5.37.0。虽然没有记录，但一个名为webpack.config.mjs 的配置文件似乎被自动拾取，并被解释为一个模块。

不过有一些注意事项：

import { Something } from 'webpack' 不起作用。改用这个：

  import webpack from 'webpack'
  const { Something } = webpack

__dirname 在 Webpack 配置中经常使用，但在模块中不可用。把它带回来：

  import path from 'path'
  const __dirname = path.dirname(new URL(import.meta.url).pathname)

【讨论】：

虽然是前一阵子，我已经问过这个问题，这是一个很好的答案。我特别喜欢 __dirname 解决方案。相当不错！
注意：这并不完全正确。要替换 __dirname，请使用 import { fileURLToPath } from 'url';const __dirname = fileURLToPath(import.meta.url); 并将 module.exports 替换为 export。见：github.com/nodejs/node/issues/28114
让const __dirname = path.dirname(fileURLToPath(new URL(import.meta.url)))

【解决方案2】：

我通过迁移到typescript 类型的文件和方法解决了这个问题：

package.json

{ 
   ...
   "type": "module",
   ...
}

babel.config.ts

export default api => {
  api.cache(true)
  return {
    presets: ['...'],
    plugins: ['...'],
    env: { '...': '...' },
  }
}

webpack.common.ts

import { common } from './webpack.common'
import webpack from 'webpack'
...

export default {
  entry: {
    '...': '...',
  },
  output: {
    '...': '...',
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/i,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: [
                [
                  '@babel/preset-env',
                  {
                    '...': '...',
                  },
                ],
                '@babel/preset-react',
                '@babel/typescript',
              ],
              plugins: [
                ['babel-plugin-transform-require-ignore', {}],
                '@babel/plugin-proposal-class-properties',
                '@babel/plugin-proposal-object-rest-spread',
              ],
            },
          },
        ],
      },
      '...'
    ],
  },
}

tsconfig.json

{
  "compilerOptions": {
    "...": "..."
  },
  "include": ["..."],
  "exclude": ["..."],
  "linterOptions": {
    "exclude": ["..."]
  },
  "defaultSeverity": "..."
}

【讨论】：