Output stylesheets only for specific entry points in Webpack without any script generation?

Question

I have multiple entry points in my webpack config for login, app, error pages, I only require login and app to output a js file for these entries and error to only output styles. At the moment all the entries output both styles and scripts and I'm not overly sure how to be specific with what gets output?

Webpack

entry: {
    'main': [
        'babel-polyfill',
        './source/styles/src/imports/main/main.scss',
        './source/app/app.main.js'
    ],
    'login': [
        './source/styles/src/imports/login/login.scss',
        './source/scripts/login.js'
    ],
    'errors': './source/styles/src/imports/errors/errors.scss'
},

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './scripts/[name]/[name].min.js',
    chunkFilename: './scripts/chunks/[id].[name].min.js'
}

Outputs

dist/
    scripts/
        errors/ <---- doesn't need to be here
        main/
        login/
    styles/
         errors/
         main/
         login/

Can anyone suggest how I can exclude errors from being output in scripts?

Answer 1

Webpack create separate file for each key present in your entry object

the key of entry object decide name of separate file to create and value of that key decide what content to include in that file

if you dont want to create a separate file but include it's content in you bundle then just add path of this file in your previous entry

for example

entry: {
  main: ['src/js/main.js'],
  app: ['src/js/app.js']
}

will create two seprate file 1.main.js and 2.app.js with there respective content

and

entry: {
  main: ['src/js/main.js', 'src/js/app.js']
}

will create one file main.js (because the key of entry object is called main) with the content of both file included in it

and

entry: {
  app: ['src/js/main.js', 'src/js/app.js']
}

will aslo create one file app.js (because the key of entry object is called app) with the content of both file included in it

so if you don't want to create separate errors file but include it's content then don't add errors property on entry object

then your configration will be like

entry: {
    'main': [
        'babel-polyfill',
        './source/styles/src/imports/main/main.scss',
        './source/app/app.main.js',
        './source/styles/src/imports/errors/errors.scss' <--- so that webpack know to include content of that file also
    ],
    'login': [
        './source/styles/src/imports/login/login.scss',
        './source/scripts/login.js'
    ]
}

also note that you need to use either the style-loader or extract-text-webpack-plugin to separate css content from your JavaScript file

to create independent errors.css file you need to use two different instance of extract-text-wepack-plugin one for regular css file and one for errors.css file and use include exclude property to seprate

    const extractCSS = new ExtractTextPlugin('main.css');
    const extractERRORS = new ExtractTextPlugin('errors.css');
    . 
    .
    .
module: {
    rules: [
      {
        test: /\.scss$/,
        exclude: /errors/,
        use: extractCSS.extract([ 'css-loader', 'sass-loader' ])
      },
      {
        test: /\.scss$/,
        include: /errors/,
        use: extractERRORS.extract([ 'css-loader', 'sass-loader' ])
      },
    ]
  },

      plugins: [
       extractCSS,
       extractERRORS
      ]