代码之家 › 专栏 › 技术社区 › keul

从webpack4中的React组件控制CSS块名

code-splitting webpack reactjs

0

keul · 技术社区 · 7 年前

我最近将网页包配置从版本1移到了版本4。

该应用程序是一个ReactJS项目,内部使用 react-loadable 以获得代码拆分。感谢老朋友,我也能在webpack1上使用这个 babel-plugin-dynamic-import-webpack .

虽然我没办法用 magic comment(由于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} />
);

在迁移到版本4之后,我还获得了块命名特性和作为一些子组件异步加载的附加拆分点 react-loadable 正在导入SASS资源:

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 {

在webpack1上,这些资源被合并到主CSS包中,而在version4上,它们被作为单独的资源提取。

这是惊人的,工作顺利,但我没有找到一种方法来定制由这些块生成的CSS名称,因为我得到了 6.927654d0493ed4acf802.css .

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

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

如果JS块和主CSS文件名可以正常工作,但是上面的scs不能使用这个配置。

我错过了什么?有没有办法定制那些CSS块? babel-plugin-universal-import 运气不好。

1 回复 | 直到 7 年前

1

0

keul 7 年前

所以问题出在一个我没有提到的外部插件中 MiniCssExtractPlugin 配置:

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

替换 [id].[hash].css 具有 [name]-[id].[hash].css 修正了这个问题。