CODEWITHSUNDEEP
javascriptwebpacksass
sliptype
sliptype

Reputation: 2974

Suppressing module output when extracting CSS with Webpack

I am trying to use webpack 4 to compile .scss files and extract them into a separate file with mini-css-extract-plugin.

The relevant parts of my webpack config include:

entry: {
  'styles': './sass/styles.scss',
  ...
},
module: {
  rules: [
  {
    test: /\.scss$/,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      'sass-loader'
    ]
  },
  ...
},
plugins: [
  new MiniCssExtractPlugin({
    filename: 'css/[name].css',
    chunkFilename: "[id].css"
  }),
  ...
],
output: {
  filename: 'js/[name].bundle.js',
}

I am seeing both css/styles.css and js/styles.bundle.js emitted. Is there any way to suppress js/styles.bundle.js? I have already attempted to use suppress-chunks-webpack-plugin with no luck (neither the .css or .js is emitted)

Upvotes: 2

Views: 308

Answers (2)

jlmt
jlmt

Reputation: 1998

Just a note that as an alternative to the plugin suggested by davcs86, Remove Files Webpack Plugin might also be worth considering for this use case - it allows deletion of files based on name or regexp before or after the build.

Upvotes: 0

davcs86
davcs86

Reputation: 3935

You can use Webpack Extraneous File Cleanup Plugin

Install using npm or yarn

npm install webpack-extraneous-file-cleanup-plugin --save-dev
yarn add webpack-extraneous-file-cleanup-plugin --dev

In your webpack.config.js file:

const ExtraneousFileCleanupPlugin = require('webpack-extraneous-file-cleanup-plugin');

module.exports = {
  ...
  plugins: [
    new ExtraneousFileCleanupPlugin({
      extensions: ['.js']
    })
  ]
}

Upvotes: 1

Related Questions