javascript - webpack 预加载器如何工作？

Question

我正在构建一个 Node 应用程序，并使用 webpack 来处理我的客户端脚本。我正在使用 webpack node api 并在我的应用程序引导文件上简单地执行以下操作:

    const webpack = require('webpack')
    const webpackConfig = require('./webpack.config.js')

    webpack(webpackConfig, (err, stats) => {
        if (err || stats.hasErrors()) {
           //do something with that
        }
    })

在我尝试使用 ES6 语法编写之前，这很有效。尽管我在 webpack.config.js 中定义了应该使用 babel 来预处理文件，但它根本不起作用。它说存在语法错误。

这是我的webpack.config.js

module.exports = {
    context: __dirname,
    entry: "./resources/assets/js/main.js",
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use : {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "es2015",
                            "es2016",
                            "stage-2"
                        ]
                    }
                }
            }
        ]
    }
}

这是我的package.json

{
  "name": "topo",
  "version": "1.0.0",
  "description": "Node app test",
  "main": "index.js",
  "dependencies": {
    "nodemon": "^1.11.0"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2016": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "pug": "^2.0.0-beta11",
    "webpack": "^2.3.3"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "António Quadrado",
  "license": "ISC"
}

我发现了关于 webpack 和 ES6 与 babel 的多个问题，我尝试使用针对这些情况给出的解决方案来解决它，但我未能使其工作，这就是为什么我发布我的具体案例，希望有人能指出我的错误。

我不仅仅是在寻找这个特定问题的解决方案，而且是为了了解 webpack 及其预加载器的工作原理，这样我就可以避免将来出现类似的情况。

我使用的是 Node v7.8.0

谢谢。

Answer 1

use期望加载器数组用于特定规则。由于您的规则中只有一个加载程序，因此您应该将所有加载程序属性直接放入该规则中(完全删除 use):

rules: [
  {
    test: /\.js$/,
    loader: "babel-loader",
    options: {
      presets: [
        "es2015",
        "es2016",
        "stage-2"
      ]
    }
  }
]

如果你必须使用use，它会看起来像这样:

rules: [
  {
    test: /\.js$/,
    use: [
      {
        loader: "babel-loader",
        options: {
          presets: [
            "es2015",
            "es2016",
            "stage-2"
          ]
        }
      }
    ]
  }
]