时间戳

首页 > 解决方案 > 我可以用作 webpack 配置的 es-modules 吗？

node.js - 我可以用作 webpack 配置的 es-modules 吗？

问题描述

我正在使用节点 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 配置文件的状态。任何人都可以指出我的一些文件吗？

标签： node.jswebpackes6-modules

解决方案

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

推荐阅读