Javascript 网页包5和ESM

我想我已经阅读了SO上的每一个帖子和互联网上的每一个相关页面，每件事都有不同的问题

我想：

• 使用webpack捆绑我的web应用程序
• 在我的源js中使用ES模块，并将其向下传输以获得更广泛的浏览器支持
• 在我的网页包配置中使用ES模块

节点14据称支持ESM，所以让我们使用它

设置1

在我的

包.json中有
“type”：“module”

然后我的
webpack.config.js
看起来像：


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

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

运行
>webpack
（webpack cli）我得到：

好的，让我们按照错误消息所说的去做

设置2a

如果我从我的
包.json中删除
“type”：“module”
，我会得到

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分段错误“$basedir/node”“$basedir/node_modules/webpack/bin/webpack.js”“$@”
在撰写本文时，webpack cli不支持ES6模块，因此您基本上必须自己重新实现它

其实没那么难，只是很烦人。您需要这样的东西（为简洁起见简化）：这里只需RTFM

您正在通过
webpack cli
运行
webpack
代码，据我所知，该代码不是ESM，我想这可能就是您无法在
webpack.config.js
中使用ESM的原因。您应该能够通过webpack提出前两点。@chenxsan有没有其他方法可以调用webpack？@OmerCohen我在看什么？哪个部分解决了我的问题？为什么不在
webpack.config.js
文件中使用CommonJS呢？似乎您正试图在网页包配置中使用
src
中的ESM代码。如果你必须使用它，也许可以寻求帮助。
module.exports = async (env, argv) => {

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

    return {
        // webpack config here
    };
}


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


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

compiler.watch()