CODEWITHSUNDEEP
webpack
Alex
Alex

Reputation: 6119

When should you use the use keyword vs the loader keyword in Webpack 2?

I am trying to migrate to Webpack 2 an I am a bit confused. On this link it says that we should replace module.loaders with module.rules and it looks like loaders syntax is replaced with use that can have objects within an array that has loader as property:

https://webpack.js.org/guides/migrating/

But further down it says: // Do not use "use" here When it is not an array, but a single loader.

This is a bit confusing and I don't understand it. When should I use "use" and when should I use "loader" / "loaders" ?

Upvotes: 3

Views: 693

Answers (1)

mpen
mpen

Reputation: 283313

Essentially, when you have one file type that uses multiple loaders, use "use". e.g.

module: {
    rules: [
        {
            test: /\.less$/,
            use: [
                'style-loader',
                ...cssLoaders,
                lessLoader
            ],
        },
        {
            test: /\.css$/,
            use: [
                'style-loader',
                ...cssLoaders,
            ],
        },
        {
            enforce: 'pre',
            test: /\.jsx?$/,
            loader: 'eslint-loader',
            include: assetsDir,
        },
        {
            test: /\.jsx?$/,
            include: assetsDir,
            loader: 'babel-loader',
        },
        {
            test: /\.(jpe?g|png|gif|svg)($|\?)/i,
            loader: 'url-loader',  // Inline images if they're less than 2 KiB
            options: {
                limit: 2048,
                name: '[name]-[sha1:hash:hex:10].[ext]',
            }
        },
        {
            test: /\.(eot|ttf|woff2?|htc)($|\?)/i,
            loader: 'file-loader',
            options: {
                name: '[name]-[sha1:hash:hex:10].[ext]',
            },
        },
    ],
},

Upvotes: 2

Related Questions