如何在 webpack.config.js 中使用 ES6？
Posted
技术标签:
【中文标题】如何在 webpack.config.js 中使用 ES6？【英文标题】：How can I use ES6 in webpack.config.js? 【发布时间】：2015-11-01 10:20:37 【问题描述】：如何在 webpack.config 中使用 ES6？ 喜欢这个回购 https://github.com/kriasoft/react-starter-kit 有吗？
例如：
使用这个
import webpack from 'webpack';
而不是
var webpack = require('webpack');
与其说是需要，不如说是好奇。
【问题讨论】：
@Amit 这是一个问题。我想不通。因为如果我在 webpack.config 中使用 es6 语法，我会得到错误。 问题是如何在webpack.config中使用es6。对我来说似乎很清楚。我用一个例子更新我的问题。 文件由node.js解析，默认不支持es6。有命令行标志可以打开它，但我不知道它们是什么。您也可以尝试使用 io.js 而不是 node 这里有同样的问题。这非常令人困惑，因为 webpack 本身确实支持 ES6 模块语法！但是在 webpack.config 中你仍然需要使用require。为 webpack 配置文件安装 babel 似乎有点矫枉过正！
Webpack 文档说 webpack.js.org/api/module-methods/#es6-recommended- ES6 语法可以在不需要 babel 的情况下使用。有没有人在不使用 babel 的情况下使用 ES6 语法导入成功？
【参考方案1】：
尝试将您的配置命名为webpack.config.babel.js。您应该在项目中包含babel-register。 react-router-bootstrap 的示例。
Webpack 在内部依赖 interpret 来完成这项工作。
【讨论】：
这对我有用。我npm run这个脚本：webpack --config webpack.config.babel.js。
我觉得即使没有--config也能直接捡起来。
我觉得应该补充一下babel-loader这个模块也是必须的
其实可以的，只需要在.babelrc文件中设置你的babel预设即可。
我使用这个特定的预设来让它工作：echo ' "presets": ["es2015"] ' > .babelrc【参考方案2】：
作为@bebraw 建议的替代方案，您可以使用 ES6+ 语法创建 javascript 自动化脚本：
// tools/bundle.js
import webpack from 'webpack';
import webpackConfig from './webpack.config.js'; // <-- Contains ES6+
const bundler = webpack(webpackConfig);
bundler.run(...);
然后用 babel 执行：
$ babel-node tools/bundle
P.S.：当您需要实现更复杂的构建步骤时，通过 JavaScript API 调用 webpack 可能是一种更好的方法（比通过命令行调用它）。例如。服务器端包准备好后，启动 Node.js 应用服务器，在 Node.js 服务器启动后，启动 BrowserSync 开发服务器。
另见：
React Starter Kit (package.json/scripts, tools/bundle.js, tools/webpack.config.js)
React Static Boilerplate (run.js, webpack.config.js, node run)
You might not need Gulp.js
【讨论】：
虽然有点复杂，但这正是 react-starter-kit 使用的。这应该是最好的答案。【参考方案3】：另一种方法是创建一个像这样的 npm 脚本："webpack": "babel-node ./node_modules/webpack/bin/webpack"，然后像这样运行它：npm run webpack。
【讨论】：
在将自定义配置传递给 webpackbabel-node ./node_modules/webpack/bin/webpack --config custom-webpack.config 时，这似乎不起作用【参考方案4】：
我在使用 Webpack 2 运行 @Juho 的解决方案时遇到问题。Webpack migration docs 建议您关闭 babel 模块解析：
需要注意的是，你会想要告诉 Babel 不要解析 这些模块符号，以便 webpack 可以使用它们。你可以这样做 在 .babelrc 或 babel-loader 选项中设置以下内容。
.babelrc:
"presets": [
["es2015", "modules": false ]
]
遗憾的是，这与自动 babel 注册功能相冲突。删除
"modules": false
来自 babel 配置的东西再次运行。但是，这会导致破坏 tree-shaking，因此完整的解决方案将涉及overwriting the presets in the loader options：
module:
rules: [
test: /\.js$/,
include: path.resolve('src'),
loader: 'babel-loader',
options:
babelrc: false,
presets: [['env', modules: false]]
]
编辑，2017 年 11 月 13 日；将 webpack 配置 sn-p 更新为 Webpack 3（感谢 @x-yuri）。旧的，Webpack 2 sn-p：
test: /\.js$/,
exclude: ['node_modules'],
loader: 'babel',
query:
babelrc: false,
presets: [
['es2015', modules: false ],
],
,
,
【讨论】：
These days (Webpack 3)，它可能看起来像这样：module:rules: [test: /\.js$/, include: path.resolve('src'), loader: 'babel-loader', options: babelrc: false, presets: [['env', modules: false]]] (gist)。 -loader 后缀不再可选。尽量避免exclude 而更喜欢include。仅当绝对路径时才包含/排除 work 中的字符串。 query 已重命名为 options。
另外，请明确表示您不希望.babelrc 中的modules: false 能够使用import 中的webpack.config.babel.js。
对于Webpack 4 -loader后缀需要加回webpack.js.org/migrate/3/…【参考方案5】：
这就是使用 webpack 4 对我有用的方法：
在package.json:
"scripts":
"dev": "cross-env APP_ENV=dev webpack-serve --require @babel/register"
,
"devDependencies":
"@babel/core": "^7.0.0-rc.1",
"@babel/register": "^7.0.0-rc.1",
"@babel/preset-env": "^7.0.0-rc.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2"
,
"babel":
"presets": [
["@babel/preset-env",
"targets":
"node": "current"
]
],
"plugins": [
"transform-es2015-modules-commonjs"
]
您可以清楚地看到每个依赖项是如何使用的，所以这并不奇怪。
注意我使用的是webpack-serve--require，但如果您想使用webpack 命令，请将其替换为webpack --config-register。无论哪种情况，都需要@babel/register 才能完成这项工作。
就是这样！
yarn dev
您可以在配置中使用es6！
对于webpack-dev-server，使用与webpack 命令相同的--config-register 选项
注意：
无需将配置文件重命名为webpack.config.babel.js（如已接受的答案所建议的那样）。 webpack.config.js 可以正常工作。
【讨论】：
看起来 web-serve 已被弃用。知道如何使用 webpack-dev-server 进行这项工作吗？我在文档中没有看到它的 --require 选项：webpack.js.org/configuration/dev-server/#devserver @CrhistianRamirez，使用--config-register 选项。 webpack-serve 的仓库也移到了这里：github.com/shellscape/webpack-serve
酷！这对我有用。这是我的脚本的样子：webpack --config-register @babel/register --config webpack/development.config.js 我必须指定 --config 因为我的 webpack 配置在一个文件夹中。谢谢！【参考方案6】：
这真的很容易，但是从任何答案中对我来说都不是很明显，所以如果其他人像我一样感到困惑：
只需将.babel 附加到文件名扩展之前的部分（假设您已将babel-register 作为依赖项安装）。
例子：
mv webpack.config.js webpack.config.babel.js
【讨论】：
我不使用babel是因为webpack本身已经支持ES6模块语法，我的项目不需要兼容ES5。它只是仍然需要require 的配置文件。这很奇怪不是吗？
哇，这很有趣！我不知道。我需要重新审视这个。奇怪的是配置文件仍然需要 require【参考方案7】：
Babel 7 和 Webpack 4
的配置package.json
...
"scripts":
"start": "webpack-dev-server --env.dev",
"build": "webpack --env.prod",
,
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies":
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.0.0",
"babel-loader": "^8.0.0",
...
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0",
"webpack-config-utils": "^2.3.1",
"webpack-dev-server": "^3.1.8"
.babelrc
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
webpack.config.babel.js
import webpack from 'webpack';
import resolve from 'path';
import getIfUtils, removeEmpty from 'webpack-config-utils';
export default env =>
const ifProd, ifNotProd = getIfUtils(env);
return
mode: ifProd('production', 'development'),
devtool: ifNotProd('cheap-module-source-map'),
output:
path: resolve(__dirname, ifProd('prod', 'dev')),
filename: 'bundle.js'
,
【讨论】：
这 still 对我不起作用，但恕我直言，它看起来是最新且几乎最干净的示例（与类属性相关的条目对于在手）。【参考方案8】：另一种方法是对节点使用 require 参数：
node -r babel-register ./node_modules/webpack/bin/webpack
在electron-react-boilerplate 中找到这种方式，查看build-main 和build-renderer 脚本。
【讨论】：
壮观 - 只是看着 Electron 并启动了一个单独的服务器，您的回答非常有帮助！ :)【参考方案9】：对于 TypeScript：直接来自 https://webpack.js.org/configuration/configuration-languages/
npm install --save-dev typescript ts-node @types/node @types/webpack
# and, if using webpack-dev-server
npm install --save-dev @types/webpack-dev-server
然后继续写你的，例如： webpack.config.ts
import path from 'path';
import webpack from 'webpack';
const config: webpack.Configuration =
mode: 'production',
entry: './foo.js',
output:
path: path.resolve(__dirname, 'dist'),
filename: 'foo.bundle.js'
;
export default config;
查看链接以获取更多详细信息，如果您不针对 commonjs，您可以在其中使用插件为 webpack 配置创建一个单独的 tsconfig 文件（这是此工作的必要条件，因为它依赖于 ts-node） .
【讨论】：
谢谢你，无法让模块为 webpack.config.js 工作，但很高兴使用 TypeScript 来代替它。【参考方案10】：将webpack.config.js 重命名为webpack.config.babel.js。
然后在 .babelrc 中："presets": ["es2015"]
但是，如果你想为 babel-cli 使用不同的 babel 配置，你的 .babelrc 可能看起来像这样：
"env":
"babel-cli":
"presets": [["es2015", "modules": false]]
,
"production":
"presets": ["es2015"]
,
"development":
"presets": ["es2015"]
在 package.json 中：
"scripts":
"babel": "BABEL_ENV='babel-cli' babel src -d dist/babel --source-maps",
"build-dev": "NODE_ENV='development' webpack -d --progress --profile --colors",
...
,
...
这很愚蠢，但如果你不使用不同的环境，"modules": false 会破坏 webpack。
有关 .babelrc 的更多信息，请查看official docs。
【讨论】：
【参考方案11】：没有足够的代表发表评论，但我想为任何 TypeScript 用户添加与上述 @Sandrik 类似的解决方案
我有两个脚本用于指向包含 ES6 语法的 webpack 配置（JS 文件）。
"start-dev": "./node_modules/.bin/ts-node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config ./webpack/webpack.config.dev.js"
和
"build": "./node_modules/.bin/ts-node ./node_modules/webpack/bin/webpack.js --config webpack/webpack.config.js"
【讨论】：
【参考方案12】：使用 Webpack 4 和 Babel 7
设置 webpack 配置文件以使用 ES2015 需要 Babel：
安装开发依赖：
npm i -D webpack \
webpack-cli \
webpack-dev-server \
@babel/core \
@babel/register \
@babel/preset-env
npm i -D html-webpack-plugin
创建一个.babelrc 文件：
"presets": ["@babel/preset-env"]
创建你的 webpack 配置，webpack.config.babel.js:
import resolve as _resolve from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
const config =
mode: 'development',
devServer:
contentBase: './dist'
,
plugins: [
new HtmlWebpackPlugin(
filename: 'index.html',
template: 'src/index.html'
)
],
resolve:
modules: [_resolve(__dirname, './src'), 'node_modules']
;
export default config;
在package.json 中创建您的脚本：
"scripts":
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --open"
,
运行npm run build 和npm start。
webpack 配置基于具有以下目录结构的示例项目：
├── README.md
├── package-lock.json
├── package.json
├── src
│ ├── Greeter.js
│ ├── index.html
│ └── index.js
└── webpack.config.babel.js
示例项目：Webpack Configuration Language Using Babel
【讨论】：
【参考方案13】：与 npm 脚本一起使用的最佳方法是
node -r babel-register ./node_modules/webpack/bin/webpack
并根据您对Babel 的要求配置其余脚本
【讨论】：
【参考方案14】：在大量的文件之后......
只需安装 es2015 预设（不是 env !!!）并将其添加到
.babelrc:
"presets": [
["es2015", "modules": false ]
]
将您的 webpack.config.js 重命名为 webpack.config.babel.js
【讨论】：
【参考方案15】：将 es6 添加到 webpack 是一个 3 步过程
在webpack.config.js中添加
module:
rules:[
test: /\.js$/,
loader: 'babel-loader'
]
-
创建一个.babel.rc并在里面添加
"presets": ["@babel/env", "@babel/react"], "plugins": [ [ "@babel/plugin-proposal-class-properties", ] ]
-
在package.json中添加
npm install @babel/core --save-dev npm install @babel/preset-env --save-dev npm install @babel/preset-react --save-dev npm install @babel/plugin-proposal-class-properties --save-dev npm install babel-loader --save-dev
【讨论】：
【参考方案16】：你不能。您必须使用 babel 或 esm 将其转换为 CommonJS。
https://github.com/webpack/webpack-cli/issues/282
但是你可以运行webpack -r esm @babel/register
【讨论】：
以上是关于如何在 webpack.config.js 中使用 ES6？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 VueCLI 3 中全局获取 `webpack.config.js` 或 `vue.config.js` 文件数据
在 vue-cli 3.0 如何生成完整的 webpack.config.js
在 webpack.config.js 中获取当前的 `--mode`
如何指定 webpack-dev-server webpack.config.js 文件位置