Webpack SplitChunksPlugin不为入口点之间共享的依赖项生成块
我正在尝试使用代码拆分,这样我就可以在不复制模块的情况下对生产代码进行单元测试。我希望webpack认识到我的*.test.ts文件依赖于与源代码本身相同的模块,并输出一个包含这些共享依赖项的包。但是,webpack只输出与入口点对应的捆绑包,不将共享代码提取到自己的捆绑包中 我正在使用官方文档中为我的用例()提供的基本配置,但运气不好。我能看到的唯一实质性区别是,我使用加载程序来传输我的代码,而官方的例子不是 文件夹结构Webpack SplitChunksPlugin不为入口点之间共享的依赖项生成块,webpack,splitchunksplugin,Webpack,Splitchunksplugin,我正在尝试使用代码拆分,这样我就可以在不复制模块的情况下对生产代码进行单元测试。我希望webpack认识到我的*.test.ts文件依赖于与源代码本身相同的模块,并输出一个包含这些共享依赖项的包。但是,webpack只输出与入口点对应的捆绑包,不将共享代码提取到自己的捆绑包中 我正在使用官方文档中为我的用例()提供的基本配置,但运气不好。我能看到的唯一实质性区别是,我使用加载程序来传输我的代码,而官方的例子不是 文件夹结构 |- /MyProject |- webpack.config.j
|- /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
。但是,我只得到两个文件:webServer.js
和webServer.test.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',
- }
+ 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];
你能上传构建的图像吗?我想看看webpack如何生成依赖关系树的bundleImage:(文件名不同。共享的依赖关系称为
auth lib.ts
)你能在github或其他地方共享你的代码吗?我可以看看哦!在这里: