5-webpack自动打包

前面我们实现了webpack的操作简化,这里我们彻底脱离操作,实现修改过程中的自动打包,基本实现,package.json配置,webpack.config.js配置

配置前
配置后

https://www.webpackjs.com/concepts/plugins/

一.基本实现

• 安装webpack-dev-server自动打包插件
  npm i webpack-dev-server -D
• 在pakege.json文件中的scripts脚本中配置
  "dev":"webpack-dev-server"
• 在项目目录中执行
  npm run dev
  会找到pakege.json包配置文件中脚本中的dev执行后面的内容
• 如何终止运行
  ctrl+C y
  注意:1.如果在安装之后无法运行,在此项目中安装webpack(npm i webpack -D) 2.修改路径:../dist/main.js为/main.js
通过webpack-dev-server自动转换得到的main.js并没有真的放在dist文件夹下,由于读写磁盘的操作是非常耗时的,所以为了提升性能,把编译好的文件放在了内存中

二.pakege.json自动打包配置

默认必须打开指定的路径到达项目目录,为了在完成自动打包插件运行后,自动打开指定的文件并且设置指定端口,执行热更新,我们需要手动的对webpack-dev-server自动打包插件进行配置

• 自动打开 --open
• 设置端口号 --port 8090
• 指定默认界面 --contentBase src
• 指定热更新 --hot

热更新:如果没有热更新,修改之后会重新编译整个index.js文件,加上热更新只会编译发生变化的部分,然后追加到已经编译好的main.js中(内存),相当于打补丁(在原有的基础上追加)

image.png

image.png

三.webpack.config.js自动打包配置

由于webpack-dev-server不仅仅是通过npm安装的一个插件,能够通过npm的配置文件运行,它还是基于webpack打包工具的插件,也可以通过webpack配置文件进行配置

• 创建devServer属性并设置
  devServer:{
  open:true,
  port:8090,
  contentBase:'src',
  hot:true
  }
• 这里热更新操作需要安装插件
  • 导入webpack模块
    const webpack=require("webpack");
  • 在devServer属性中配置

  • 创建热更新插件
    plugins:[new webpack.HotModuleReplacementPlugin]

    
    image.png