Webpack 5与ESM

Question

我想我已经读过所有的帖子，互联网上的每一个相关页面，每件事都有一些不同的问题。

我要：

• 使用webpack将我的web应用程序捆绑起来
• 在我的源js中使用ES模块，并将它们转换成更广泛的浏览器支持
• 在我的webpack配置中使用ES模块

节点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只是不支持ES6模块，所以基本上您必须自己重新实现它。

没那么难，只是很烦人。您需要这样的东西(简化为简洁)：这里只需要RTFM，https://webpack.js.org/api/node/

import webpack from 'webpack';
import webpackConfig from './webpack.config.js';


var config = await webpackConfig(mode);
var compiler = webpack(config);

compiler.watch()

Answer 2

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

• 将"type": "module"添加到package.json中

或

• 用mjs扩展命名webpack配置：webpack.config.mjs

Answer 3

Webpack对ESM配置文件没有本机支持，正如其他答案所述，但它确实支持自动转换这些文件。如果您的配置文件名为webpack(.whatever).babel.js，并且已正确安装了babel，则配置文件在使用前将被静默地降级。

据我所知，在本例中配置Babel的唯一方法是在项目目录中使用顶级.babelrc。我的只包含{"presets": ["@babel/preset-env"]}。这确实意味着，如果我想在构建中使用Babel，我必须通过例如插件选项来配置它，但它适合我。

ETA: user @bendwarn在一条删除的评论中说，Webpack的情况4.5.0可以将您的配置文件命名为webpack.config.mjs，如果您的包是type: "module"，只需将其命名为webpack.config.js，并且它应该可以本地工作。我还没试过(坦白地说，第二个听起来是个糟糕的主意)。