如何使用Babel和Webpack将ES6编译为JavaScript

Question

我想使用babel和webpack将ES6编译为javascript。

这是我目前的webpack.config.js：

module.exports={
    entry: './src/app.js',
    output: {
        path: __dirname +'./dist',
        filename: 'app.bundle.js'
    }
}

在cmd中运行webpack命令后，一切听起来都不错，但是bundle.js文件不在dist文件夹中。

Answer 1

您需要将babel-loader添加到代码使用的模块加载器列表中（以及项目依赖项）。

然后，您需要将其添加到Webpack执行的加载器列表中。

例如，遵循babel-loader文档：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

特别是，预设env取代了之前最新的es2017 es2016，es2015预设，如the docs所示。