插件使用

Webpack是一个模块打包器，它可以将多个模块的资源打包成一个静态资源文件，以便在浏览器中使用。Webpack提供了一种插件机制，可以在打包过程中自定义操作。Webpack插件可以在构建过程中做很多事情，例如：

  • 1、在构建过程中修改输入文件；
  • 2、在构建过程中添加额外的输出文件；
  • 3、在构建过程中修改输出文件；
  • 4、在构建过程中添加额外的构建步骤。

使用插件的方法有两种：

  • 1、使用webpack内置的插件；
  • 2、使用第三方插件。

使用webpack内置的插件，需要在webpack.config.js中配置插件，如：

热更新打包

热更新是指在开发过程中，当文件发生变化时，不需要重新编译和重新加载，而是可以自动更新应用程序，以保持应用程序的最新状态。Webpack提供了一种热更新的方式，可以在开发过程中，在修改文件后立即更新应用，而无需重新编译和重新加载。

使用webpack的热更新功能，需要在webpack.config.js中配置，如：

上面的代码中，设置了devServer.hot为true，表示启用热更新功能。如果要使用热更新，还需要安装webpack-dev-server，然后在package.json中添加一个脚本，如：

上面的代码中，--open参数表示在服务启动后自动打开浏览器。运行npm start，就可以启动webpack-dev-server，实现热更新。