webpack5打包忽略指定js文件？

Question

本地两个js: a.js、b.js
其中a.js为逻辑处理，依赖b.js的数据资源
b.js由于引入的资源文件过多导致打包a.js的时候直接内存爆炸了
webpack.config.js的配置里该如何忽略b.js不打包

webpack build出错：

$ webpack

<--- Last few GCs --->

[23256:000001D2E3C24990]    74242 ms: Mark-sweep (reduce) 4126.2 (4131.3) -> 4125.9 (4132.3) MB, 17.5 / 0.0 ms  (average mu = 0.898, current mu = 0.002) last resort GC in old space requested[23256:000001D2E3C24990]    74279 ms: Mark-sweep (reduce) 4125.9 (4131.3) -> 4125.9 (4132.0) MB, 37.5 / 0.0 ms  (average mu = 0.756, current mu = 0.000) last resort GC in old space requested

<--- JS stacktrace --->

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: 00007FF612633E0F napi_wrap+108911
 2: 00007FF6125D7E16 v8::base::CPU::has_sse+61910
 3: 00007FF6125D8D16 node::OnFatalError+294
 4: 00007FF612EB0CEE v8::Isolate::ReportExternalAllocationLimitReached+94
 5: 00007FF612E95ACD v8::SharedArrayBuffer::Externalize+781
 6: 00007FF612D3F95C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1516
 7: 00007FF612D3AD91 v8::internal::Heap::AllocateExternalBackingStore+1601
 8: 00007FF612D54A05 v8::internal::GCIdleTimeHandler::ShouldDoContextDisposalMarkCompact+1029
 9: 00007FF612D54E55 v8::internal::Factory::AllocateRaw+37
10: 00007FF612D694DF v8::internal::FactoryBase<v8::internal::Factory>::NewRawTwoByteString+79
11: 00007FF612D63895 v8::internal::Factory::NewStringFromUtf8+181
12: 00007FF612EAC9BF v8::String::NewFromUtf8+287
13: 00007FF6124F82C1 v8::internal::HashTable<v8::internal::EphemeronHashTable,v8::internal::EphemeronHashTableShape>::HashTable<v8::internal::EphemeronHashTable,v8::internal::EphemeronHashTableShape>+33473
14: 00007FF6125F337B v8::internal::Malloced::operator delete+4107
15: 00007FF612E5DDCF v8::internal::Builtins::builtin_handle+321711
16: 00007FF612E5D364 v8::internal::Builtins::builtin_handle+319044
17: 00007FF612E5D657 v8::internal::Builtins::builtin_handle+319799
18: 00007FF612E5D4A3 v8::internal::Builtins::builtin_handle+319363
19: 00007FF612F39C8D v8::internal::SetupIsolateDelegate::SetupHeap+465453
20: 00007FF612ED2092 v8::internal::SetupIsolateDelegate::SetupHeap+40498
21: 000000BA85E19F92

webpack.config.js的js处理板块：

{
    test:/\.(js|jsx|ts\tsx)$/,
    exclude: /node_modules/, 
    use: 'babel-loader'
},

Answer 1

只要存在依赖关系都会被打包的，忽略了b.js ，依赖它的逻辑还怎么跑。。。

1. 可以试试将b.js拆分成多个模块
2. 将b.js 抽离成单独的js文件，直接在html中引入，使用 DefinePlugin 定义模块名在项目中使用，也可以使用 ProvidePlugin实现

Answer 2

{
    test:/\.(js|jsx|ts\tsx)$/,
    exclude: /(node_modules|b\.js)/, 
    use: 'babel-loader'
}

试试这样？

Answer 3

把 b.js 当成独立的资源然后 externals

Answer 4

看你的需求描述，有两个选择：

1. 把 b.js 处理的资源直接放在线上，执行主体程序加载然后处理。
2. 把 b.js 做成一个构建脚本，处理完要加载的资源，然后 a.js 直接使用这些资源。类似一个 loader。