webpack 预加载器是如何工作的？答案

【问题标题】：How do webpack pre-loaders work?webpack 预加载器是如何工作的？
【发布时间】：2017-09-13 05:25:59
【问题描述】：

我正在构建一个节点应用程序，并且我正在使用 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 及其预加载器是如何工作的，这样我将来就可以避免类似的情况。

我正在使用节点 v7.8.0

谢谢。

【问题讨论】：

为什么要测试 .js 而不是 .es6 文件扩展名？
我不知道.es6 扩展名。我只有 .js 上面写有 ES6 语法的文件。另外，我这样做就像在 webpack 文档上一样。没有看到对 .es6 文件的任何引用。你能解释一下吗？
.es6 被一些人使用，但相对不常见。由于此时我们已经通过了 ES6，而 ES8 几乎已发布，因此将您的 JS 版本绑定到文件扩展名是一个坏主意。

标签： javascript node.js webpack ecmascript-6 babeljs

【解决方案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"
          ]
        }
      }
    ]
  }
]

【讨论】：

不幸的是，这不是问题所在。我已经尝试了两种方法，它吐出相同的语法错误，一旦我放弃import xis from '/xis.js'
我必须道歉，因为你是对的。我在其他地方遇到了语法错误，我已修复，现在可以使用了。