如何在webpack.config.js中使用ES6？

村村 · 05月28日

如何在webpack.config中使用ES6？像这个仓库 https://github.com/kriasoft/react-starter-kit 可以吗？

例如：

使用这个

import webpack from 'webpack';

代替

var webpack = require('webpack');

这是一种好奇而不是需要。

Webpack 网络包

回答(8)

时间

伽

伽罗

8楼 · 2020-05-28 15:00:57

大量文件之后...

只需安装es2015预设（而不是env !!!）并将其添加到

.babelrc:
{
    "presets": [
         ["es2015", { "modules": false }]
    ]
}

重命名webpack.config.js为webpack.config.babel.js

0人赞回复

阿

阿飞

7楼 · 2020-05-28 15:00:57

我最好的方法与npm脚本一起是

node -r babel-register ./node_modules/webpack/bin/webpack

并根据您对Babel的要求配置其余脚本

0人赞回复

Gil伽罗小宇宙

6楼 · 2020-05-28 15:00:57

没有足够的代表评论，但我想为所有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"

0人赞回复

神

神乐

5楼 · 2020-05-28 15:00:57

另一种方法是对节点使用require参数：

node -r babel-register ./node_modules/webpack/bin/webpack

发现这样的电子反应，样板，看看build-main和build-renderer脚本。

0人赞回复

西

西里神奇

4楼 · 2020-05-28 15:00:57

这就是使用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，请使用--config-register与webpack命令相同的选项

注意：

无需将配置文件重命名为webpack.config.babel.js（如已接受的答案所建议）。webpack.config.js会很好。

0人赞回复

3楼 · 2020-05-28 15:00:56

尝试将您的配置命名为webpack.config.babel.js。您应该在项目中包含babel-register。在react-router-bootstrap的示例。

Webpack依靠内部解释来完成这项工作。

0人赞回复

阿

阿飞

2楼 · 2020-05-28 15:00:56

另一种方法是使用npm脚本，例如："webpack": "babel-node ./node_modules/webpack/bin/webpack"，然后像这样运行：npm run webpack。

0人赞回复

Itachi

1楼 · 2020-05-28 15:00:56

这确实很容易，但是从任何答案中对我来说都不是很明显，所以如果其他人像我一样困惑：

只需.babel在扩展名之前附加到文件名的一部分（假设您已将其babel-register安装为依赖项）即可。

例：

mv webpack.config.js webpack.config.babel.js

0人赞回复

你的回答

温馨提示：登录后可发表评论或回复

关闭，朕知道了

如何在webpack.config.js中使用ES6？

如何在webpack.config.js中使用ES6？

注意：

扫码关注微信公众号或小程序

相关文章

网站

工具

关于

微信公众号