在Angular Universal中,我们可以使用Webpack的externals配置来将仅在Node环境中可用的第三方库从捆绑文件中排除。下面是一个示例解决方法:
在项目根目录下创建一个名为webpack.server.config.js的文件。
在webpack.server.config.js中添加以下代码:
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
module.exports = {
entry: {
server: './server.ts',
},
resolve: {
extensions: ['.ts', '.js'],
},
target: 'node',
externals: [nodeExternals()],
output: {
path: __dirname,
filename: '[name].js',
chunkFilename: '[id].chunk.js',
libraryTarget: 'commonjs2',
},
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader',
options: {
configFile: 'tsconfig.server.json',
},
},
],
},
plugins: [
new webpack.ContextReplacementPlugin(
/(.+)?angular(\\|\/)core(.+)?/,
path.resolve(__dirname, 'src'), {}
),
],
};
"scripts": {
"build:server": "webpack --config webpack.server.config.js"
}
这样做将会使用Webpack的nodeExternals插件来将仅在Node环境中可用的依赖项从捆绑文件中排除。这些依赖项将在运行时从Node模块中加载,而不是在客户端捆绑文件中加载。