Webpack bundle splitting commonschunk plugin

Question

I am using CommonsChunkPlugin to split my vendor bundles. I also have ExtractTextPlugin to extract CSS into one file. But, for some reason, I am getting vendor.css as well.

Here's my webpack config:

const config = {
  output: {
    publicPath: '/blaze-assets/',
  },

  cache: isDebug,

  stats: {
    colors: true,
    reasons: isDebug,
    hash: isVerbose,
    version: isVerbose,
    timings: true,
    chunks: isVerbose,
    chunkModules: isVerbose,
    cached: isVerbose,
    cachedAssets: isVerbose,
  },

  plugins: [
    new ExtractTextPlugin({
      filename: isDebug ? '[name].css' : '[name].[chunkhash].css',
      allChunks: true,
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: isDebug,
    }),
  ],

  resolve: {
    extensions: ['.webpack.js', '.web.js', '.js', '.jsx', '.json'],
    modules: [
      path.resolve('./src'),
      'node_modules',
    ]
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, '../src'),
        ],
        loader: 'babel-loader',
      }, {
        test: /\.(scss|css)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            'sass-loader',
          ]
        })
      }, {
        test: /\.txt$/,
        loader: 'raw-loader',
      }, {
        test: /\.(otf|png|jpg|jpeg|gif|svg|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000',
      }, {
        test: /\.(eot|ttf|wav|mp3)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader',
      }, {
        test: /\.jade$/,
        loader: 'jade-loader',
      }
    ],
  },
};

//
// Configuration for the client-side bundles
// -----------------------------------------------------------------------------
let clientBundles = {}

Object.keys(bundles).forEach(function (bundle) {
  clientBundles[bundle] = [
    'bootstrap-loader',
    `./src/bundles/${bundle}/index.js`
  ]
})

merge(
  clientBundles,
  {
    'embedWidget': ['./src/components/Widgets/EmbedWidget/widgetLoader.js']
  },
)

const clientConfig = extend(true, {}, config, {
  entry: clientBundles,
  output: {
    path: path.join(__dirname, '../build/public/blaze-assets/'),
    filename: isDebug ? '[name].js' : '[name].[chunkhash].js',
    chunkFilename: isDebug ? '[name].chunk.js' : '[name].[chunkhash:8].chunk.js',
  },
  node: {
    fs: "empty"
  },
  // Choose a developer tool to enhance debugging
  // http://webpack.github.io/docs/configuration.html#devtool
  devtool: isDebug ? 'cheap-module-source-map' : false,
  plugins: [
    // Move modules that occur in multiple entry chunks to a new entry chunk (the commons chunk).
    // http://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module) {
        // This prevents stylesheet resources with the .css or .scss extension
        // from being moved from their original chunk to the vendor chunk
        if(module.resource && (/^.*\.(css|scss)$/).test(module.resource)) {
          return false;
        }
        return module.context && module.context.indexOf("node_modules") !== -1;
      },
    }),
    ...config.plugins,
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new webpack.DefinePlugin({
      ...GLOBALS,
      'process.env.BROWSER': true
    }),
    ...(!isDebug ? [
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          // jscs:disable requireCamelCaseOrUpperCaseIdentifiers
          screw_ie8: true,

          // jscs:enable requireCamelCaseOrUpperCaseIdentifiers
          warnings: isVerbose,
          unused: true,
          dead_code: true,
        },

      }),
      new webpack.optimize.AggressiveMergingPlugin(),
    ] : []),
    new AssetsPlugin({
      path: path.join(__dirname, '../build'),
      filename: 'assets.json',
      prettyPrint: true,
    }),
  ],
});

I followed everything as per the docs, but not able to figure out what is wrong in the config? I am using webpack 2 and extract-text-webpack-plugin: 2.1.0

The webpack output looks like this, It has vendor.css in the output which is not expected.

Answer 1

Use different loader configurations for the SCSS/CSS files under node_modules, do not apply ExtractTextPlugin for the files under node_modules.

{
  test: /\.(scss|css)$/,
  exclude: [/node_modules/],    // Add this line under your current configs
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      'css-loader',
      'sass-loader',
    ]
  })
},

// Add a new rule for those under node_modules
{
  test: /\.(scss|css)$/,
  include: [/node_modules/],
  loaders: [
    'style-loader',
    'css-loader',
    'sass-loader',
  ]
}