Webpack loader order misbehaved

Question

I have used webpack ^2.2.1. I have added some loaders In my webpack.config.js file.

But my loader have not call in an order.

I used babel-loader for transform react-es6 codes to react-es5 codes. My custom-loader need react-es6 code. So I put my loader to first. I have print source content in each loaders. But every time first printing babel-loader info. After printing my info.

Is my loader order correct?

Help me! Thanks in advance!

   // 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']
                      }
                   }
                ]
            }
         ]
      }
    }

Try declaring just one rule with multiple loaders. Right now, you have two rules that match the same pattern. Also, `module.loaders` has been replaced by [`module.rules`](https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules) in Webpack 2. — robertklep, Aug 18 '17 at 08:09
The loaders are used in order "right to left" so the last loader in your array is used first. See: https://stackoverflow.com/questions/32234329/what-is-the-loader-order-for-webpack — Flocke, Aug 18 '17 at 08:52

score 5 · Accepted Answer · answered Aug 18 '17 at 08:54

5

Loaders in Webpack are used in order "right to left" so the last loader in your array is used first. Therefore babel is translating everything and your loader is second in line.

See: What is the loader order for webpack?

Try switching the order of your loaders (and of course use module.rules instead of module.loaders, so that you are using the new Pattern in Webpack 2)

answered Aug 18 '17 at 08:54

Flocke

1,004
17
23

Thanks @Flocke . Now I understood. – Vasi Karan Aug 18 '17 at 09:53
1

I actually dont know that... i would guess they are from left to right to be honest... just try it out :) Im sorry, i never used plugins except for ignoring node_modules which shouldnt be packed by webpack – Flocke Aug 18 '17 at 10:28
Okay I will check and put result in comments. :-) – Vasi Karan Aug 18 '17 at 10:30

Webpack loader order misbehaved

1 Answers1