配置热重载
原创...大约 1 分钟
对应用程序的引导过程影响最大的是 TypeScript
编译。但问题是,每次发生变化时,我们是否必须重新编译整个项目?一点也不。这就是为什么 webpack HMR(Hot-Module Replacement)大大减少了实例化您的应用程序所需的时间。
如果使用的是 Nest CLI,则配置过程非常简单。CLI 包装 webpack
,允许使用 HotModuleReplacementPlugin
。
安装
首先,我们安装所需的软件包:
$ npm i --save-dev webpack-node-externals run-script-webpack-plugin webpack
配置
然后,我们需要创建一个 webpack-hmr.config.js
,它是webpack的一个配置文件,并将其放入根目录。
const nodeExternals = require('webpack-node-externals');
const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');
module.exports = function (options, webpack) {
return {
...options,
entry: ['webpack/hot/poll?100', options.entry],
externals: [
nodeExternals({
allowlist: ['webpack/hot/poll?100'],
}),
],
plugins: [
...options.plugins,
new webpack.HotModuleReplacementPlugin(),
new webpack.WatchIgnorePlugin({
paths: [/\.js$/, /\.d\.ts$/],
}),
new RunScriptWebpackPlugin({ name: options.output.filename, autoRestart: false }),
],
};
};
此函数获取包含默认 webpack
配置的原始对象,并返回一个已修改的对象和一个已应用的 HotModuleReplacementPlugin
插件。
热模块更换
为了启用 HMR,请打开应用程序入口文件( main.ts )并添加一些与 Webpack相关的说明,如下所示:
declare const module: any;
async function bootstrap() {
const app = await NestFactory.create(AppModule);
await app.listen(3000);
if (module.hot) {
module.hot.accept();
module.hot.dispose(() => app.close());
}
}
bootstrap();
更改启动脚本
就这样。为了简化执行过程,请将这行添加到 package.json 文件的脚本中。
"start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js --watch"
现在只需打开你的命令行并运行下面的命令:
npm run start:dev
Powered by Waline v2.15.7