未分類
3 3 月 2021

webpack 5 升级, 怎么让配置文件可以用 ES6 语法写啊

webpack 5 升级, 怎么让配置文件可以用 ES6 语法写啊

資深大佬 : huiyifyj 2

在 Webpack 4 还可以通过 cli 的 --config-register @babel/register 参数来开启webpack.config.js 配置文件的 ES6 语法支持

但是最近升级 5 后发现这个 cli 参数已经不支持了, 导致出现报错。

webpack 5 升级, 怎么让配置文件可以用 ES6 语法写啊

有人知道这情况怎么解决吗？

大佬有話說 (13)

  • 主 資深大佬 : huiyifyj

    顶下自己

  • 主 資深大佬 : huiyifyj

    不是吧，这就要沉下去了？

  • 資深大佬 : noe132

    看官方文档：
    https://webpack.js.org/configuration/configuration-languages/

  • 主 資深大佬 : huiyifyj

    @noe132 #3 但这种文档好像还是不行
    .babelrc:
    “`
    {
    “presets”: [
    “@babel/preset-env”,
    “@babel/preset-react”
    ]
    }
    “`
    文档实例还是运行不起来，说是不支持 import 语法

  • 主 資深大佬 : huiyifyj

    @noe132 #3

    已解决，根据官方人员的回复提示，开启 webpack 的 es6 支持需要对配置文件正确命名
    我之前的配置文件是 `webpack.prod.js`, 重命名为 `webpack.prod.babel.js` 就正常了

    https://github.com/webpack/webpack/issues/12772#issuecomment-785007882

  • 資深大佬 : akasuv

    js 文件使用 babel-loader 没效果吗？

  • 主 資深大佬 : huiyifyj

    @akasuv #6
    不是 babel-loader，我是想让 webpack 配置文件也开启 es6 的 import 这类的语法

  • 資深大佬 : sam014

    @huiyifyj #7 你这不叫 node 端 es 语法，你这叫 node 端使用 ES module

    https://juejin.cn/post/6844904004502159373

  • 資深大佬 : sam014

    #8 发言作废，没过脑子

  • 資深大佬 : claneo

    主有兴趣的话可以看下这个
    https://github.com/gulpjs/interpret/blob/master/index.js#L13

  • 主 資深大佬 : huiyifyj

    @claneo #10 这是 gulp 吧。不过谢了

  • 資深大佬 : claneo

    @huiyifyj 好吧偷了个懒没说清楚，webpack 读配置文件的时候会用这个库（在这篇文档第一段就提到了 https://webpack.js.org/configuration/configuration-languages/），然后这个库会根据文件名尝试用对应的编译器来处理文件

  • 主 資深大佬 : huiyifyj

    @claneo #12
    谢谢提醒，你说的应该是那个 node-interpret 吧