如何在webpack4的webpack.config.js中使用es6

Question

如何在webpack.config.js文件中使用import?
从js文件引入数据到webpack.config.js中使用，但是js是es6模块编写的

Answer 1

请安装以下依赖包

npm install --save-dev babel-register babel-preset-es2015

创建webpack.config.babel.js文件，可以使用es6写配置。

你还需要.babelrc

{
  "presets": ["es2015"]
}

以上内容可以在webpack官方文档查询到

Answer 2

@lordGuan 提供了官方给出的方案,不过正如文档最后的警告中描述的,如果你的项目中已经在使用 Babel,并且配置跟 Webpack 需要的不一致,那你可能需要维护两份 Babel 配置.
或者如果你本来项目中没有使用 Babel,不想大动干戈去额外安装 Babel.

我这里提供另外一个方案.题主可以根据自己的需要去选择合适的方案

当你使用的 Node.js 版本大于v13.2.0时,只要在package.json中添加"type": "module"

// package.json
{
  ...
  "type":"module"
}

或者直接将webpack.config.js改成webpack.config.mjs.

不需要额外安装其他依赖,就可以直接使用import.

不过这种情况跟使用 Babel 会有一些差别,Babel 会将webpack.config.js转译成CommonJS在去执行,而这种情况是直接在 Node.js 使用ES modules的方式执行.
比较明显的是在CommonJS中可以直接使用__dirname,但在ES modules中__dirname是未定义的,要使用的话,需要提前定义好

__dirname is not defined

import path from 'path'
import { fileURLToPath } from 'url'
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

要了解更多差异,请查看官方文档,都有列出来
Differences between ES modules and CommonJS