How to add request to webpack loader with multiple loaders?

Question

I have this Babel bootloader that works

{ test: /\.jsx?$/, loader: 'babel', query: babelSettings, exclude: /node_modules/ }, 

But now I want the CoffeeScript downloader, but I want to pass it through Babel to get some fantastic HMR stuff.

 { test: /\.coffee$/, loader: 'babel!coffee', query: babelSettings, exclude: /node_modules/ }, 

This does not work, and leads to the following error.

Error: Unable to determine the request and multiple loaders in the list of loaders

Any idea how to define a query only for the Babylonian part of the loader chain? A request is a complex object, and I don’t think I can encode it.

 var babelSettings = { stage: 0 }; if (process.env.NODE_ENV !== 'production') { babelSettings.plugins = ['react-transform']; babelSettings.extra = { 'react-transform': { transforms: [{ transform: 'react-transform-hmr', imports: ['react'], locals: ['module'] }, { transform: 'react-transform-catch-errors', imports: ['react', 'redbox-react'] }] // redbox-react is breaking the line numbers :-( // you might want to disable it } }; } 

Answer 1

Update: In older versions of Webpack, you can define an array of loaders in the Webpack configuration .

If you need to use older versions of Webpack or add inline parameters, the original answer is given below.

---

This can be done by setting the query parameters in the loader line itself, since the query object key will work for only one loader.

Assuming your settings object can be serialized to JSON, as your example shows, you can easily pass your settings object as a JSON request. Then only the Babel bootloader will receive the settings.

 { test: /\.coffee$/, loader: 'babel?'+JSON.stringify(babelSettings)+'!coffee', exclude: /node_modules/ } 

The function for this is somewhat documented here:

Using Loaders: Query parameters

Most loaders accept parameters in the normal request format ( ?key=value&key2=value2 ) and as a JSON object ( ?{"key":"value","key2":"value2"} ).

Answer 2

Sokra, the creator of Webpack, gives his own opinion on how to do this here , but you will probably be better off serving with webpack-combine-loaders , which is more similar in style to defining a single loader with a request object.

With webpack-combine-loaders you can define multiple loaders as such:

 combineLoaders([ { loader: 'css-loader', query: { modules: true, sourceMap: true, localIdentName: '[name]__[local]--[hash:base64:5]', }, }, { loader: 'sass-loader', query: { sourceMap: true, includePaths: [ 'app/assets/stylesheets', 'app/assets/stylesheets/legacy', ], }, }, ]); 

Answer 3

In webpack 2 and 3, this can be configured much more cleanly.

Loaders can be passed to an array of loader objects. Each loader object can specify an options object, which acts as a webpack 1 query for this particular loader.

For example, using react-hot-loader and babel-loader , with babel-loader configured with some options in webpack 2 and 3

 module: { rules: [{ test: /\.js$/, exclude: /node_modules/, use: [{ loader: 'react-hot-loader' }, { loader: 'babel-loader', options: { babelrc: false, presets: [ 'es2015-native-modules', 'stage-0', 'react' ] } }] }] } 

For comparison, here is the same configuration in webpack 1 using the query string method.

 module: { loaders: [{ test: /\.js$/, exclude: /node_modules/, loaders: [ 'react-hot', 'babel-loader?' + 'babelrc=false,' + 'presets[]=es2015,' + 'presets[]=stage-0,' + 'presets[]=react' ] }] } 

Notice the changed property names throughout the chain.

Also note that I changed the es2015 to es2015-native-modules in the babel-loader setup. This has nothing to do with the options specification, it is just that, including the es6 modules, you can use the tree-record function introduced in v2. It can be left alone, and it will still work, but the answer will seem incomplete without indicating an obvious update :-)

Answer 4

The test property is just a regular expression, so you can check both jsx and coffee at the same time: test: /\.(jsx|coffee)$/

Sass / SCSS is a bit simpler: test: /\.s[ac]ss$/