在webpack配置文件中使用babel插件

Question

在他们的网站上，webpack展示了插件的用法，如下所示：

  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]

我想使用babel插件transform-async-to-generator，所以我将其添加到babelrc文件中，但我不知道这是否足够，是否还需要在webpack文件中添加？如果需要，应该如何添加？

我无法确定在webpack配置文件中编写插件是否是必需的，因为目前我遇到了运行时错误，并不确定仅在babelrc文件中编写是否有效。

我的当前webpack配置文件：

var path = require('path')

module.exports = {
  entry: path.resolve(__dirname, 'partner/index.js'),
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'partner_bundle.js'
  },
  target: 'web',
  module: {
    rules: [
      {
        test: /\.js$/, // Check for all js files
        loader: 'babel-loader',
        query: {
          presets: [
            'babel-preset-env',
            'babel-preset-stage-0'
          ].map(require.resolve)
        },
        exclude: /node_modules\/(?!other-module)/
      }
    ]
  },
  stats: {
    colors: true
  },
  devtool: 'source-map',
  resolve: { symlinks: false }
}

babelrc file

{
  "presets": [
    "env",
    "stage-2"
  ],
  "plugins": [
    "transform-async-to-generator",
    "transform-async-generator-functions",
    [
      "transform-runtime",
      {
        "helpers": false,
        "polyfill": false,
        "regenerator": true
      }
    ]
  ]
}

- Rasim Avcı

---

你可能需要在webpack配置中添加一个module条目来使用babel-loader。你的.babelrc文件定义了babel应该做什么。在webpack配置中包含babel-loader实际上是在运行babel对你的代码进行转换。查看这个关于如何在webpack中使用babel的教程。 - Chirag Ravindra

我在我的帖子中添加了webpack配置文件，已经使用了babel loader，我只是想问如何添加babel插件到webpack配置文件中，或者我应该怎么做？ - Rasim Avcı

babel-loader会自动使用.babelrc文件，因此您不必在webpack.config.js中添加相同的配置。实际上，您还可以将当前在webpack配置中拥有的babel预设放入.babelrc中。 - Daniel Diekmeier

Answer 1

在我的Webpack配置中，您可以看到我如何包含Babel插件：

    test: /(\.jsx|\.js)$/, // JSX and JS files should be present.
    exclude: /(node_modules|bower_components)/,
    use: [{
        loader: 'babel-loader',
        options: {
            // Babel must be required like this to be able to use npm-link to link to shared code, see:
            // https://dev59.com/z1sW5IYBdhLWcg3wyZww
            presets: [
                [node_modules + '/@babel/preset-env', {
                    // Ref: 1) http://2ality.com/2017/02/babel-preset-env.html
                    // 2) http://caniuse.com/usage-table
                    // In case it supports the browserlist in package.json, remove this here, see:
                    // https://github.com/babel/babel-preset-env/issues/149
                    "targets": {"browsers": ["> 4%", "safari 10", "ie 11", "iOS 9"]},
                    "modules": false,
                    "useBuiltIns": 'entry',
                    // "debug": true
                }],
                [node_modules + '/@babel/preset-react'],
            ],
            plugins: [
                node_modules + '/@babel/plugin-proposal-class-properties',
                node_modules + '/@babel/plugin-proposal-object-rest-spread'].map(require.resolve)
        }
    }]

- edbras