Controlling CSS chunk names from a React component in Webpack 4

Question

I recently moved a Webpack configuration from version 1 to version 4.

The application is a ReactJS project which internally uses react-loadable to obtain code splitting. I was able to use this also on webpack 1 thanks to the old babel-plugin-dynamic-import-webpack.

All was working perfectly, although I had no way to control chunk names with the webpackChunkName magic comment (the comment itself was ignored as not supported by webpack).

import React from 'react';
import Loadable from 'react-loadable';
import Loading from 'components/Loading';

const LoadableComponent = Loadable({
  loader: () => import(/* webpackChunkName: "carousel" */'./CarouselWidget'),
  loading: Loading
});

export default (props) => (
  <LoadableComponent {...props} />
);

After migrating to version 4 I gained also the chunk naming feature and additional split points as some of the subcomponents loaded asynchronously with react-loadable were importing SASS resources:

import 'slick-carousel/slick/slick.scss';
import 'slick-carousel/slick/slick-theme.scss';

import React, { PureComponent, PropTypes } from 'react';

export default class CarouselWidget extends Component {

On webpack 1 those resources were merged in the main CSS bundle, while on version 4 they are extracted as separate resource.

This is amazing and working smoothly, but I didn't find a way to customize CSS names generated by those chunks, as I get something like 6.927654d0493ed4acf802.css.

In my webpack config I'm using custom CSS and chunk names:

  get cssFilename() {
    return `[name]-${appVersion}.css`;
  }

  get chunkFilename() {
    return 'something-[name]-[chunkhash].chunk.js';
  }

This configuration if working properly for JS chunks and main CSS filenames, but not taken by SCSS above.

What I'm missing? There's a way to customize those CSS chunks? I also tried some additional plugins, like babel-plugin-universal-import with no luck.

keul · Accepted Answer · 2018-07-09 10:06:05Z

3

So the problem was in an external plugin I did't mentioned: the MiniCssExtractPlugin configuration:

  plugins: [
    new MiniCssExtractPlugin({
      filename: this.cssFilename,
      chunkFilename: '[id].[hash].css'
    }),

Replacing [id].[hash].css with [name]-[id].[hash].css fixed the issue.

answered Jul 9, 2018 at 10:06

keul

7,83728 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Controlling CSS chunk names from a React component in Webpack 4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related