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

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

例如：

使用这个

import webpack from 'webpack';

代替

var webpack = require('webpack');

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

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

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

作为@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

PS：当您需要实施更复杂的构建步骤时，通过JavaScript API调用webpack可能是一种更好的方法（比通过命令行调用webpack更好）。例如，在服务器端捆绑包准备就绪后，启动Node.js应用服务器，并在Node.js服务器启动后立即启动BrowserSync开发服务器。

也可以看看：

• 反应入门套件（package.json/scripts，tools/bundle.js，tools/webpack.config.js）
• 反应静态样板（run.js，webpack.config.js，node run）
• 您可能不需要Gulp.js

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

我在让@Juho的解决方案与Webpack 2 一起运行时遇到问题。Webpack迁移文档建议您进行babel模块解析：

重要的是要注意，您将要告诉Babel不要解析这些模块符号，以便Webpack可以使用它们。您可以通过在.babelrc或babel-loader选项中设置以下内容来执行此操作。

.babelrc：

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

令人遗憾的是，这与自动Babel寄存器功能冲突。拆下

{ "modules": false }

通过babel config重新运行。但是，这将导致摇树，因此一个完整的解决方案将涉及覆盖loader选项中的预设：

module: {
    rules: [
        {
            test: /\.js$/,
            include: path.resolve('src'),
            loader: 'babel-loader',
            options: {
                babelrc: false,
                presets: [['env', {modules: false}]]
            }
        }
    ]
}

编辑，2017年11月13日; 将webpack配置片段更新为Webpack 3（感谢@ x-yuri）。旧的Webpack 2代码段：

{
    test: /\.js$/,
    exclude: ['node_modules'],
    loader: 'babel',
    query: {
        babelrc: false,
        presets: [
            ['es2015', { modules: false }],
        ],
    },
},

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

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

例：

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

这是使用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会很好。

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

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

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

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'
        },

重命名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的更多信息，请查看官方文档。

对于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（可以依靠ts-node的话，可以使用此插件，仅针对webpack配置使用单独的tsconfig文件），则可在其中使用单独的tsconfig文件。

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

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

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

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

大量文件之后...

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

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

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

使用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

示例项目：使用Babel的Webpack配置语言

将ES6添加到Webpack的过程分为3个步骤

1. 在webpack.config.js中添加

   module:{
   
             rules:[
               {
                 test: /\.js$/,
                 loader: 'babel-loader'
               }
             ]
          }
   

   2. 创建一个.babel.rc并添加到其中

{
    "presets": ["@babel/env", "@babel/react"],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties",
        ]
      ]
}

3. 在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

你不能 您必须使用babel或将其转换为CommonJS esm。

https://github.com/webpack/webpack-cli/issues/282

但是你可以跑 webpack -r esm @babel/register