Question

我正在使用节点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模块的配置文件？我找不到有关该主题的大量信息。我发现了这个问题（问题已于2019年6月关闭）：

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

所以我想知道有关mjs的webpack配置文件的状态。有人可以指出我的一些文档吗？

Answer 1

我通过迁移到 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": "..."
}

Answer 2

我使用的是 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)

我可以用作webpack配置的es模块吗？

2 个答案: