How to conditionally connect part of code or files in webpack?

Question

webpack

I can’t figure out how to make Webpack include certain SCSS and JavaScript files only during development so that they don’t get into production.

I found that you can use NODE_ENV, but I don't understand how to exclude files with it.

If anyone has an example or tell me where I can read about it?

Answer 1

webpack.config.js is a regular executable js file, so you can write anything there like in js, any conditions and so on.
Check for prod. you can do something like this (it may be different for you, see package.json -> scripts)

const isProd = process.env.NODE_ENV === 'production'

Files are excluded like this, a regular expression or an array of regular expressions is passed to exclude:

// module.exports -> module -> rules ...
      {
        test: /\.js$/, // ищем файлы с расширением js
        exclude: isProd ? [/node_modules/, /\.dev.js$/] : /node_modules/,  // исключаем node_modules, и файлы типа main.dev.js для production, либо только node_modules для dev и так далее
        use: // ваши loader'ы
      },