我正在运行 webpack v5.50,用于 Angular 项目的服务器端渲染构建,配置如下
module.exports = {
mode: 'none',
entry: {
server: './server.ts',
},
externals: {
'./dist/server/main': 'require("./server/main")'
},
target: 'node',
resolve: { extensions: ['.ts', '.js'] },
optimization: {
minimize: false
},
output: {
// Puts the output at the root of the dist folder
path: path.join(__dirname, 'dist'),
library: 'app',
libraryTarget: 'umd',
filename: '[name].js',
},
module: {
noParse: /polyfills-.*\.js/,
rules: [
{ test: /\.ts$/, loader: 'ts-loader' },
{
// Mark files inside `@angular/core` as using SystemJS style dynamic imports.
// Removing this will cause deprecation warnings to appear.
test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
parser: { system: true },
},
]
},
plugins: [
new webpack.ContextReplacementPlugin(
// fixes WARNING Critical dependency: the request of a dependency is an expression
/(.+)?angular(\\|\/)core(.+)?/,
path.join(__dirname, 'src'), // location of your src
{}
),
new webpack.ContextReplacementPlugin(
/(.+)?express(\\|\/)(.+)?/,
path.join(__dirname, 'src'),
{}
)
]
}
但在 Angular 12 升级后,相同的构建在发出后挂起,没有解决几个小时,最后出现错误,如下所示
[webpack.Progress] 95% emitting emit
[webpack.Progress] 95% emitting emit
[webpack.Progress] 98% emitting after emit
[webpack.Progress] 98% emitting after emit
[webpack.Progress] 99% done plugins
[webpack.Progress] 99% done plugin
[webpack.Progress] 99% cache store build dependencies
[webpack.Progress] 99% cache store build dependencies
[webpack.Progress] 99% cache begin idle
[webpack.Progress] 99% cache begin idle
[webpack.Progress] 100%
[webpack.Progress] 100%
/node_modules/webpack/lib/stats/DefaultStatsPrinterPlugin.js:1183
return match.replace(content, format(content));
^
RangeError: Invalid string length
at String.replace (<anonymous>)
/node_modules/webpack/lib/stats/DefaultStatsPrinterPlugin.js:1183:18
at String.replace (<anonymous>)
P.S:Node - 16.19.1,Webpack - 5.50,Typescript - 4.3.5,"@angular-devkit/build-angular": "~12.2.18" 内部安装 webpack 5.50 版本用于编译 SSR 版本