Question

我希望有人能帮助我。

我的项目使用react和webpack。使用服务器端渲染（将react.net for.net用作）我正在使用webpack构建我的CSS。我可以在ssr上标识要加载哪个css标签的方法是通过我在应用程序上拥有的差异入口点。

这个想法是每个入口点将有2个CSS文件。一个用于关键CSS，一个用于其余CSS。

它工作正常，但是有一个原因。当我在多个入口点中使用同一组件时，webpack会为此创建通用的CSS文件。

但是，我有一个缺点，那就是它只发生在cacheGroups中的文件上。

module.exports = {
  mode: 'production',
  entry: {
    LoaderContainer: './js/containers/loader/loaderContainer.js',
    ReviewsContainer: './js/containers/reviews/reviewsContainer.js',
    TopBarContainer: './js/containers/topBar/topBarContainer.js',
    VideoPlayer: './js/components/grid-editor/VideoPlayer.js',
    HomePageContainer: './js/containers/homePage/HomePageContainer.js',
    SearchContainer: './js/containers/search/SearchContainer.js',
    TourDetailContainer: './js/containers/tourDetail/TourDetailContainer.js',
    FAQWidgetContainer: './js/components/faq/FaqsContainer.js',
    CallUsContainer: './js/components/call-us/CallUsContainer.js',
    GetInTouchContainer: './js/components/get-in-touch/GetInTouchContainer.js',
    FAQContainer: './js/components/faq/FAQSectionContainer.js',
    LandingPageContainer: './js/containers/landingPage/LandingPageSsr.js',
    TourHeader: './js/components/tour-detail/TourHeader.js',
    PostDetailContainer: './js/containers/blog/postDetailContainer.js',
    HeaderContainer: './js/containers/header/headerContainer.js',
    FeedbackContainer: './js/containers/feedback/feedbackContainer.js',
    OurPromise: './js/components/home-page/OurPromise.js'
  },
  optimization: {
    mergeDuplicateChunks: false,
    concatenateModules: false,
    splitChunks: {
      chunks: 'initial',
      maxAsyncRequests: 1,
      maxInitialRequests: 1,
      cacheGroups: {
        critical: {
          test: /critical(.+?)\.scss$/,
          enforce: true
        }
      }
    }
  },

  cache: false,
  devtool: 'source-map',
  output: {
    path: path.resolve(__dirname, '../../dist/'),
    publicPath: '/dist/'
  },
  externals: externals,
  plugins: [
    new CleanWebpackPlugin([path.resolve(__dirname, '../../dist/')], {
      root: path.resolve(__dirname, '../../')
    }),
    new webpack.IgnorePlugin(/moment/),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)?$/,
        loaders: ['babel-loader'],
        include: [path.resolve(__dirname, '../js/')],
        exclude: /node_modules|bower_components/
      },
      {
        test: /\.svg$/,
        loader: 'svg-inline-loader'
      },
      {
        test: /\.scss$/,
        exclude: /\.module\.scss$/,
        sideEffects: true,
        use: [
          MiniCssExtractPlugin.loader,
          stylesLoaders.CSSLoader,

          stylesLoaders.sassLoader
        ]
      },
      {
        test: /\.module\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          stylesLoaders.CSSModuleLoader,
          stylesLoaders.sassLoader
        ]
      }
    ]
  },
  resolve: {
    modules: ['node_modules', path.resolve('.')]
  },
  node: {
    net: 'empty',
    tls: 'empty',
    dns: 'empty'
  }
}

通常输出为：关键〜HeaderContainer.min.ccs HeaderContainer.min.css

但是有时候我有：紧急〜HomePageContainer〜LandingPageContainer〜OurPromise.min.css

我想防止生成此公共文件，并阻止将内容插入每个单独的入口点包中。

我尽力了。如果有人可以帮助，那就太好了

防止Webpack在cachedGroups的入口点之间重用代码

0 个答案: