顺藤摸瓜,我在@nestjs/cli/lib/compiler/defaults/webpack-defaults.js发现了猫腻,如下图所示: 它使用webpack-node-externals插件屏蔽了依赖的打包...那我们就自己创建一个webpack.config.js文件,忽略掉externals以及一些nest提供的插件,这个问题就完美解决了,实现代码如下所示: 将externals属性置为空,就忽略掉了默认的webpack-node-externals.../src/main", target: "node", // 置为空即可忽略webpack-node-externals插件 externals: {}, // ts文件的处理 module
2 精读 核心思想只有一句话:利用 webpack-node-externals 忽略 Webpack 对指向 node_modules 的 require 或 import 语句: 进行项目/组件调试时...进行组件编译时,开启 production 模式,且利用 webpack-node-externals 插件忽略 node_modules。...对配置做如下修改: export default { ...webpackConfig, mode: "production" }; 组件发布 组件发布时,依然使用 webpack-cli 构建,但利用 webpack-node-externals...import * as nodeExternals from "webpack-node-externals"; export default { ...webpackConfig, mode
新建一个专门用于构建服务端渲染代码的配置文件 webpack_server.config.js,内容如下: const path = require('path'); const nodeExternals = require('webpack-node-externals...以上代码有几个关键的地方,分别是: target: 'node' 由于输出代码的运行环境是 Node.js,源码中依赖的 Node.js 原生模块没必要打包进去; externals: [nodeExternals()] webpack-node-externals...}); 再安装新引入的第三方依赖: # 安装 Webpack 构建依赖 npm i -D css-loader style-loader ignore-loader webpack-node-externals
5.1 服务端配置 const merge = require('webpack-merge') const nodeExternals = require('webpack-node-externals...' }, // https://webpack.js.org/configuration/externals/#function // https://github.com/liady/webpack-node-externals
/webpack.base.conf') const nodeExternals = require('webpack-node-externals') const config = require(
; 在项目根目录新建webpack.server.js: // 服务端webpack const path=require('path'); const nodeExternals=require('webpack-node-externals...preset-env']] } } ] } } 然后在命令行安装用到的库: npm i webpack webpack-cli webpack-node-externals
$mount("#app"); }); 对webpack进行配置 安装依赖 npm install webpack-node-externals lodash.merge -D 对vue.config.js...const VueSSRClientPlugin = require("vue-server-renderer/client-plugin"); const nodeExternals = require("webpack-node-externals...// https://webpack.js.org/configuration/externals/#function // https://github.com/liady/webpack-node-externals
'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const nodeExternals = require('webpack-node-externals
__tests__/, ], }, ], }, } 添加外部扩展,这样 webpack 就不会打包外部依赖(node 模块) npm install --save-dev webpack-node-externals...最终的 webpack 配置 你最终的 webpack 配置应该是这样的: const path = require('path'); const nodeExternals = require('webpack-node-externals
new VueSSRClientPlugin() ] // ... 10. webpack 服务器端的配置 server的配置有用到新插件运行安装: npm i -D webpack-node-externals...webpack = require('webpack') const merge = require('webpack-merge') const nodeExternals = require('webpack-node-externals...}, // https://webpack.js.org/configuration/externals/#function // https://github.com/liady/webpack-node-externals
针对服务端渲染代码,我们可以剔除node_modules,从而大幅减少服务端代码生成耗时 通过 webpack-node-externals插件实现这一点,具体使用方法如下: const nodeExternals...= require('webpack-node-externals');module.export={// 省略其它配置 externals: [ nodeExternals({ // 注意如果存在
const nodeExternals = require('webpack-node-externals'); module.exports = { entry: { index: '.
const VueSSRClientPlugin = require("vue-server-renderer/client-plugin"); const nodeExternals = require("webpack-node-externals
const merge = require('webpack-merge'); const nodeExternals = require('webpack-node-externals'); const
也需要配置相应的 webpack 编译文件:webpack.server.js const path = require("path");const nodeExternals = require("webpack-node-externals
return callback(null, 'amd ' + request); // 通过 amd 定义剔除文件的引用方式 } callback(); } ] 不过,更方便的直接使用 webpack-node-externals
const path = require('path'); const merge = require('webpack-merge'); const nodeExternals = require('webpack-node-externals
领取专属 10元无门槛券
手把手带您无忧上云