SplitChunksPlugin не создает чанк для зависимостей, общих для точек входа - PullRequest
Новая
       38

SplitChunksPlugin не создает чанк для зависимостей, общих для точек входа

0 голосов
/ 12 мая 2019

Я пытаюсь использовать разбиение кода, чтобы я мог тестировать производственный код без дублирования модулей.Я хотел бы, чтобы webpack распознал, что мои файлы * .test.ts основаны на тех же модулях, что и сам исходный код, и вывел пакет, содержащий эти общие зависимости.Однако webpack выводит только пакеты, соответствующие точкам входа, и не извлекает общий код в свой собственный пакет.

Я использую базовую конфигурацию, приведенную в официальной документации для моего варианта использования (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

1 Ответ

0 голосов
/ 13 мая 2019

Следующие изменения в моем конфиге исправили проблему для меня. 

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];
...