CODEWITHSUNDEEP
webpack
dknaack
dknaack

Reputation: 60468

Understanding Webpack: Loader defined twice

In a boilerplate project on GitHub, I found something inside a Webpack config that I don't yet understand.

Why is the following loader defined twice with the same test? If I remove one of them, the application does not render as expected.

  { test: /\.css$/, include: path.resolve('./src/app'), loaders: [
       'style-loader',
       'css-loader',
       'postcss-loader'
    ]
  },
  { test: /\.css$/, exclude: path.resolve('./src/app'), loaders: [
       'style-loader',
       'css-loader'
    ]
  },

Upvotes: 2

Views: 536

Answers (1)

Filip Dupanović
Filip Dupanović

Reputation: 33660

If you look at the {include, exclude} option configured for the controllers, the first configuration will be used for your sources, the second for all others (vendor in node_modules/, global modules, other paths). You can apply the same approach and, say, configure/skip parsing sources with Babel, etc.

The reason why we do this is because sources published in the registry have already been parsed and transformed as part of their package's pre-publish script, while our package is still in development.

Here, you expect only your sources to use syntax and expressions that target PostCSS, while you treat those distributed through NPM to be standard CSS. You only parse them to resolve dependencies and to transform them to JS modules, skipping the PostCSS parser entirely.

Upvotes: 2

Related Questions