SplitChunksPlugin 不为入口点之间共享的依赖项生成块答案

【问题标题】：SplitChunksPlugin not generating chunk for dependencies shared among entry pointsSplitChunksPlugin 不为入口点之间共享的依赖项生成块
【发布时间】：2019-05-11 23:10:59
【问题描述】：

我正在尝试使用代码拆分，这样我就可以在不复制模块的情况下对生产代码进行单元测试。我希望 webpack 能够识别我的 *.test.ts 文件依赖于与源代码本身相同的模块，并输出包含这些共享依赖项的包。但是webpack只输出入口点对应的bundle，并没有将共享代码提取到自己的bundle中。

我正在为我的用例 (https://webpack.js.org/guides/code-splitting#prevent-duplication) 使用官方文档中提供的基本配置，但没有运气。我能看到的唯一实质性区别是我使用加载器来转译我的代码，而官方示例不是。

git repo

文件夹结构

|- /MyProject
  |- webpack.config.js
  |- /node_modules
  |- /build
  |- /src
    |- webServer.ts
    |- myLib.ts
    |- webServer.test.ts
    |- myLib.test.ts

webServer.ts

import './myLib';
// do webserver stuff

myLib.test.ts

import './myLib';
import mocha, chai, etc etc
// unit tests for myLib

webServer.test.ts

import './myLib.test';
// this file is just a convenient entry point for grouping unit tests

webpack.config.js

var nodeExternals = require('webpack-node-externals');
const serverConfig = {
  mode: 'development',
  target: 'node',
  externals: [nodeExternals()],
  entry: {
    webServer: './src/webServer.ts',
    'webServer.test': './src/webServer.test.ts'
  },
  output: {
    path: __dirname + '/build',
    filename: '[name].js'
  },
  resolve: {
    extensions: ['.ts']
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    }
  },
  module: {
    rules: [{
      test: /\.ts/,
      include: [__dirname],
      exclude: /node_modules/,
      use: [
        { loader: 'babel-loader' },
        { loader: 'ts-loader' }
      ]
    }]
}
module.exports = [serverConfig];

我希望 webpack 发出 3 个文件：webServer.js、webServer.test.js，以及捆绑了 myLib 的第三个文件。但是，我只得到 2 个文件：webServer.js 和 webServer.test.js

【问题讨论】：

你能上传构建的图像吗？我想看看 webpack 是如何生成你的 bundle
依赖树图片：imgur.com/otHLKiR（文件名不同，共享依赖名为auth-lib.ts）
你能把你的代码分享到 github 或者别的什么地方让我看看
哦！这里：gitlab.com/jlapointe/codesplittingtest

标签： webpack splitchunksplugin

【解决方案1】：

以下对我的配置的更改为我解决了这个问题。

var nodeExternals = require('webpack-node-externals');
const serverConfig = {
  mode: 'development',
  target: 'node',
  externals: [nodeExternals()],
  entry: {
    webServer: './src/webServer.ts',
    'webServer.test': './src/webServer.test.ts'
  },
  output: {
    path: __dirname + '/build',
    filename: '[name].js'
  },
  resolve: {
    extensions: ['.ts']
  },
  optimization: {
-   splitChunks: {
-     chunks: 'all',
-   }
+   splitChunks: {
+     cacheGroups: {
+       common: {
+         chunks: 'all',
+         enforce: true,
+         name: 'common'
+       }
+     }
+   }
  },
  module: {
    rules: [{
      test: /\.ts/,
      include: [__dirname],
      exclude: /node_modules/,
      use: [
        { loader: 'babel-loader' },
        { loader: 'ts-loader' }
      ]
    }]
}
module.exports = [serverConfig];

【讨论】：