首页 文章

从Webpack 4中的React组件控制CSS块名称

提问于
浏览 次
0

我最近将Webpack配置从版本1移到了版本4 .

该应用程序是一个ReactJS项目，它在内部使用react-loadable来获取代码分割 . 由于旧的 babel-plugin-dynamic-import-webpack ，我也可以在webpack 1上使用它 .

一切都运行得很好，虽然我没办法用webpackChunkName魔术注释来控制块名（注释本身被忽略，因为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 {

在webpack 1上，这些资源在主CSS包中合并，而在版本4中，它们被提取为单独的资源 .

这是惊人的，并且工作顺利，但我没有找到一种方法来自定义由这些块生成的CSS名称，因为我得到像 6.927654d0493ed4acf802.css 这样的东西 .

在我的webpack配置中，我使用自定义CSS和块名称：

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

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

此配置如果适用于JS块和主要CSS文件名，但上面没有采用SCSS .

我_2886393是一种自定义CSS块的方法吗？我也尝试了一些额外的插件，比如 babel-plugin-universal-import 没有运气 .

reactjs webpack code-splitting

1 回答

  • 0

    所以问题在于我没有提到的外部插件：MiniCssExtractPlugin配置：

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

    用 [name]-[id].[hash].css 替换 [id].[hash].css 解决了这个问题 .

    回复于

相关问题