Question

我正在使用webpack 4.28.4 + MiniCssExtractPlugin 0.8.0。

我的网站由两部分组成：

需要一些JS / CSS包和我的common块的老式网页；
除了所有老式的依赖项之外，还需要与React相关的软件包（react，react-dom，react-router-dom，prop-type等）的现代React应用。

我想创建两个共享块：

一个vendors块，包含所有共享的东西。因此，它应该包含所有第三方模块，只要它们由我的common块使用即可。
一个react块，其中包含我的React应用程序仅需要的供应商模块。

我检查了this split-chunks example。这是我的尝试（webpack.config.js）：

module.exports = {
  entry: {
    // Website-wide JS and CSS, required by both old-school pages and React apps.
    common: path.resolve(sourceDirectory, 'common/index.js'),

    // React apps.
    app1: path.resolve(sourceDirectory, 'app1/index.jsx'),
    app2: path.resolve(sourceDirectory, 'app2/index.jsx'),
  },

  // ...

  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {

        vendors: {
          test: (module, chunks) => {
            const isVendorModule = /[\\/]node_modules[\\/]/.test(
              // TODO: module.identifier() ? or, module.resource ?
            );
            const commonChunk = chunks.find(chunk => chunk.name === 'common');
            return isVendorModule && commonChunk !== undefined;
          },
          name: 'vendors',
          enforce: true,
          priority: 20, // Higher priority.
        },

        react: {
          test: /[\\/]node_modules[\\/]/,
          name: 'react',
          enforce: true,
          priority: 10,
        },

      },
    },
  },

  // ...
};

但是我不知道如何正确实施isVendorModule测试。要实现与test: /[\\/]node_modules[\\/]/相同的行为，我应该针对module.identifier()或module.resource进行测试吗？

当涉及sass和mini-css-extract-plugin时，我变得更加困惑。例如，我有一个主题脚本文件src/styles/theme.scss，它是由我的common块导入的。我在splitChunks测试中两次遇到了这个文件：

第一次：

- module.identifier(): /Users/zheng/my-website/frontend/node_modules/mini-css-extract-plugin/dist/loader.js!/Users/zheng/my-website/frontend/node_modules/css-loader/dist/cjs.js??ref--5-1!/Users/zheng/my-website/frontend/node_modules/postcss-loader/src/index.js!/Users/zheng/my-website/frontend/node_modules/sass-loader/dist/cjs.js!/Users/zheng/my-website/frontend/src/styles/theme.scss
- module.type: javascript/auto
- module.resource: /Users/zheng/my-website/frontend/src/styles/theme.scss

第二次：

- module.identifier(): css /Users/zheng/my-website/frontend/node_modules/css-loader/dist/cjs.js??ref--5-1!/Users/zheng/my-website/frontend/node_modules/postcss-loader/src/index.js!/Users/zheng/my-website/frontend/node_modules/sass-loader/dist/cjs.js!/Users/zheng/my-website/frontend/src/styles/theme.scss 0
- module.type: css/mini-extract
- module.resource: undefined

那么我应该如何实现测试功能？对于同一theme.scss文件的两次出现，我应该返回什么？

谢谢！

Webpack 4 + Sass + MiniCssExtractPlugin：如何为React应用创建自定义供应商块

0 个答案: