Webpack 加载器顺序异常

Question

我用过 webpack ^2.2.1。我在我的 webpack.config.js 文件中添加了一些加载器。

但是我的装载机没有调用订单。

我使用 babel-loader 将 react-es6 代码转换为 react-es5 代码。我的自定义加载器需要 react-es6 代码。所以我把我的装载机放在第一位。我在每个加载器中都有打印源内容。但每次首先打印 babel-loader 信息。打印我的信息后。

我的装载机顺序正确吗？

帮帮我！提前致谢！

   // webpack.config.js

    module.exports = {
      entry: './src/index.js',
      output: {
         filename: 'bundle.js',
         path: path.resolve(__dirname, './build')
      }
      module: {
         loaders: [
            {
                test: /\.js$/,
                use: 'my-custom-loader'
            },
            {
                test: /\.js$/,
                use: [
                   {
                      loader: 'babel-loader',
                      options: {
                         presets: ['babel-preset-es2015', 'babel-preset-react']
                      }
                   }
                ]
            }
         ]
      }
    }

Answer 1

Webpack 中的加载器按“从右到左”的顺序使用，因此首先使用数组中的最后一个加载器。因此，babel 正在翻译所有内容，而您的 loader 排在第二位。

见：What is the loader order for webpack?

尝试切换加载器的顺序（当然要使用 module.rules 而不是 module.loaders，这样您就可以使用 Webpack 2 中的新模式）