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

网络包 Webpack

村村

2020-05-28

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

例如:

使用这个

import webpack from 'webpack';

代替

var webpack = require('webpack');

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

第4210篇《如何在webpack.config.js中使用ES6?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

8个回答
伽罗 2020.05.28

大量文件之后...

  1. 只需安装es2015预设(而不是env !!!)并将其添加到

    .babelrc:
    {
        "presets": [
             ["es2015", { "modules": false }]
        ]
    }
    
  2. 重命名webpack.config.jswebpack.config.babel.js

阿飞 2020.05.28

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

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

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

Gil伽罗小宇宙 2020.05.28

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

神乐 2020.05.28

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

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

发现这样的电子反应,样板,看看build-mainbuild-renderer脚本。

西里神奇 2020.05.28

这就是使用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-registerwebpack命令相同选项


注意:

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

GO 2020.05.28

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

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

阿飞 2020.05.28

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

Itachi 2020.05.28

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

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

例:

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android