webpackでcss/scssをentryに指定したとき、同名の不要なjsが出力されないようにする

概要

やむを得ない事情があり、エントリーポイントにscssを指定したい場合がある。
そのような時こんな感じで書けばいけるのだが、このままだとcssが出力されたときに余計なjsも出力されてしまう。

今回の場合、global.cssのみが出力されてほしいのだが、global.jsも一緒に出力される。

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')

const mode = process.env.NODE_ENV || 'development'
const prod = mode === 'production'


module.exports = {
  entry: {
    bundle: './src/main.js',
    global: './src/scss/main.scss'
  },
  output: {
    path: __dirname + '/dist',
    filename: '[name].js',
    chunkFilename: '[name].[id].js'
  },
  module: {
    rules: [
      {
        test: /\.svelte$/,
        use: {
          loader: 'svelte-loader',
          options: {
            preprocess: require('svelte-preprocess')({
              scss: true,
              postcss: ({
                plugins: [
                  require('autoprefixer')
                ]
              })
            }),
            emitCss: true,
            hotReload: true
          }
        }
      },
      {
        test: /\.scss$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          { loader: 'css-loader' },
          { loader: 'sass-loader' }
        ]
      }
    ]
  },
  mode,
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ],
devtool: prod ? false: 'source-map
}

解決方法

webpack-fix-style-only-entriesを使えば解決できる。

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+ const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
const path = require('path')

const mode = process.env.NODE_ENV || 'development'
const prod = mode === 'production'

module.exports = {
  entry: {
    bundle: './src/main.js',
    global: './src/scss/main.scss'
  },
  resolve: {
    alias: {
      svelte: path.resolve('node_modules', 'svelte')
    },
    extensions: ['.mjs', '.js', '.svelte'],
    mainFields: ['svelte', 'browser', 'module', 'main']
  },
  output: {
    path: __dirname + '/dist',
    filename: '[name].js',
    chunkFilename: '[name].[id].js'
  },
  module: {
    rules: [
      {
        test: /\.svelte$/,
        use: {
          loader: 'svelte-loader',
          options: {
            preprocess: require('svelte-preprocess')({
              scss: true,
              postcss: ({
                plugins: [
                  require('autoprefixer')
                ]
              })
            }),
            emitCss: true,
            hotReload: true
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          /**
           * MiniCssExtractPlugin doesn't support HMR.
           * For developing, use 'style-loader' instead.
           * */
          prod ? MiniCssExtractPlugin.loader : 'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          { loader: 'css-loader' },
          { loader: 'sass-loader' }
        ]
      }
    ]
  },
  mode,
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
+   }),
+   new FixStyleOnlyEntriesPlugin()
  ],
  devtool: prod ? false : 'source-map'
}