面试题：Webpack开发环境热更新配置的基本步骤

Question

请描述在Webpack的开发环境中，实现热更新配置的基本步骤，包括需要安装的插件以及在webpack.config.js中进行怎样的配置。

Answer 1

1. 安装插件：
   • 安装webpack - dev - server，它是实现热更新的关键插件。可以通过npm install webpack - dev - server --save - dev或yarn add webpack - dev - server - D进行安装。
2. 在webpack.config.js中配置：

   const path = require('path');
   
   module.exports = {
       entry: './src/index.js',// 入口文件
       output: {
           path: path.resolve(__dirname, 'dist'),
           filename: 'bundle.js'
       },
       devServer: {
           contentBase: path.join(__dirname, 'dist'),
           hot: true, // 开启热更新
           port: 3000 // 开发服务器端口
       }
   };
   

   • contentBase指定开发服务器从哪个目录提供文件。这里指定为dist目录。
   • hot设置为true开启热更新功能。
   • port设置开发服务器运行的端口号，这里设置为3000，可以根据需要修改。