使用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配置语言使用Babel

没有足够的代表来评论，但我想为任何TypeScript用户添加一个类似于上面@Sandrik的解决方案

我有两个脚本，我使用指向webpack配置(JS文件)，包含ES6语法。

"start-dev": "./node_modules/.bin/ts-node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js——config. /webpack/webpack.config.dev.js"

and

"./node_modules/.bin/ts-node ./node_modules/webpack/bin/webpack.js——config webpack/webpack.config.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的更多信息，请查看官方文档。

编辑:截至2021年2月

https://github.com/webpack/webpack-cli/pull/2381

你不能。你必须把它转换成CommonJS，要么用babel要么用esm。

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

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

看了无数的文件之后……

只需安装es2015预置(不是env !!)并将其添加到 .babelrc: ｛ “预设”:( ["es2015"， {"modules": false}] ］ ｝ 将webpack.config.js重命名为webpack.config.babel.js

2022年的读者:

"webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"

在package.json中添加"type": "module" 将webpack.config.js的语法改为ESM。 享受。