javascript - Webpack 5 和 ESM

Question

我想我已经阅读了 SO 上的每个线程以及互联网上的每个相关页面，一切都有一些问题
我想:

使用 webpack 捆绑我的 web 应用程序

在我的源 js 中使用 ES 模块并将它们转换为更广泛的浏览器支持

在我的 webpack 配置中使用 ES 模块

据称 Node 14 支持 ESM，所以让我们使用它
设置 1
我有 "type": "module"在我的 package.json然后我的 webpack.config.js看起来像:

import { somethingUseful } from './src/js/useful-things.js';

export default (env, argv) => {
    return {
        // webpack config here
    };
}

运行 > webpack (webpack-cli) 我得到:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: D:\git\Useroo\webpack.config.js
require() of ES modules is not supported.
require() of webpack.config.js from C:\nvm\v14.14.0\node_modules\webpack-cli\lib\groups\resolveConfig.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename webpack.config.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from package.json.

好的，让我们按照错误消息中的说明进行操作
设置 2a
如果我删除 "type": "module"来自我的 package.json我明白了

webpack.config.js
import { somethingUseful } from './src/js/useful-things.js';
^^^^^^

SyntaxError: Cannot use import statement outside a module

对....所以让我们尝试其他建议的替代方案:
设置 2b

module.exports = async (env, argv) => {

    var somethingUseful = await import('./src/js/useful-things.js');

    return {
        // webpack config here
    };
}

我得到一个段错误。 /c/Program Files/nodejs/webpack: line 14: 14272 Segmentation fault "$basedir/node" "$basedir/node_modules/webpack/bin/webpack.js" "$@"

Answer 1

webpack-cli现在支持 ES 模块。所需要的只是

添加 "type": "module"到你的 package.json

或者

使用 mjs 命名你的 webpack 配置分机号:webpack.config.mjs