5-webpack自动打包

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

5-webpack自动打包
文章图片
配置前
5-webpack自动打包
文章图片
配置后
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中(内存),相当于打补丁(在原有的基础上追加)

5-webpack自动打包
文章图片
image.png
5-webpack自动打包
文章图片
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]

      5-webpack自动打包
      文章图片
      image.png

    推荐阅读