首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

热重载(Webpack)

对应用程序引导过程的影响最大的是TypeScript编译。但问题是,每当发生变化时,我们是否必须重新编译整个项目?一点也不。这就是为什么webpackHMR(热模块替换)会显着减少实例化应用程序所需的时间。

安装

首先,让我们安装所需的包:

代码语言:javascript
复制
$ npm i --save-dev webpack webpack-cli webpack-node-externals

组态

然后,我们需要创建一个webpack.config.jswebpack的配置文件,并将其放在根目录中。

代码语言:javascript
复制
const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  entry: ['webpack/hot/poll?100', './src/main.ts'],
  watch: true,
  target: 'node',
  externals: [
    nodeExternals({
      whitelist: ['webpack/hot/poll?100'],
    }),
  ],
  module: {
    rules: [
      {
        test: /.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  mode: 'development',
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  plugins: [new webpack.HotModuleReplacementPlugin()],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'server.js',
  },
};

这个配置告诉webpack我们的应用程序的一些基本的东西。其中包含一个入口文件,哪个目录应该用于保存已编译的文件,以及我们想要使用哪种加载器来编译源文件。基本上,你不必太担心,你根本不需要理解这个文件的内容。

热模块更换

为了启用HMR,我们必须打开Nest应用程序条目文件(这是main.ts)并添加一些关键的东西。

代码语言:javascript
复制
declare const module: any;

async function bootstrap() {
  const app = await NestFactory.create(ApplicationModule);
  await app.listen(3000);

  if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => app.close());
  }
}
bootstrap();

就这样。要简化执行过程,请将这两行添加到scripts内部package.json文件中。

代码语言:javascript
复制
"start": "node dist/server",
"webpack": "webpack --config webpack.config.js"

现在只需打开命令行并运行以下命令:

代码语言:javascript
复制
$ npm run webpack

webpack开始监视文件后,在另一个命令行窗口中运行另一个命令:

代码语言:javascript
复制
$ npm run start

扫码关注腾讯云开发者

领取腾讯云代金券