webpack 保存文件后自动打包_自动打包插件webpack-dev-server的安装、配置及使用

1、介绍：

webpack-dev-server插件可以实现Webpack的自动打包编译

这样 就不需要每次修改完代码都重新手动输入webpack打包了

2、安装：

在项目的根路径下输入：cnpm i webpack-dev-server -D 将插件安装到项目的本地开发依赖中

该工具的用法和webpack命令的用法完全一致 直接输入命令即可自动监听

在项目中本地安装的webpack-dev-server无法作为脚本命令直接运行

因此 需在package.json中进行配置：

3、使用：

配置之后 输入npm run dev运行 默认启动在8080端口：

注：webpack-dev-server若要正常运行 必须在项目的本地安装webpack(即使安装了全局的也不行)

启动之后 每次Ctrl+s保存JS代码 webpack-dev-server都会自动重新编译：

此时 访问8080端口 显示的是项目根目录下的所有文件和文件夹 因为默认托管的目录就是项目根目录

在页面里若要访问打包好的bundle.js 直接通过/bundle.js访问即可 前面无需带上域名：

该bundle.js是自动生成的 且会自动随着代码改变重新编译

页面中引入了该/bundle.js之后 每次保存js代码 无需手动刷新浏览器页面即可显示最新效果

Document

• 1
• 2
• 3
• 4

webpack-dev-server打包生成的bundle.js文件并没有存放到实际的物理磁盘上 而是直接托管到了内存中

因此 在项目的根目录中是找不到该bundle.js的

可以认为webpack-dev-server在项目根目录下放置了一个虚拟的bundle.js

因为 物理磁盘会有转速的限制 若托管到内存 速度会比在物理磁盘快很多

4、常用参数的配置

配置方式一：在package.json中追加参数

(推荐此配置方式 比配置方式二更加简便)

webpack-dev-server打包完毕后自动打开浏览器：

在package.json脚本配置中的webpack-dev-server后加上--open

修改服务器端口号：

在package.json脚本配置中的webpack-dev-server后加上--port 端口号

指定进入服务器后默认访问路径：

在package.json脚本配置中的webpack-dev-server后加上--contentBase 路径

开启热重载：

未配置热重载之前 打包是重新生成整份的JS文件

而热重载会生成变动的代码的补丁 对原本的JS文件进行局部更新 减少不必要的代码更新

且开启热重载之后 可实现CSS样式修改时 页面的无刷新更新(异步)

在package.json脚本配置中的webpack-dev-server后加上--hot

配置方式二：在webpack.config.js中配置

若在该配置方式里要开启热重载的话 配置方式分成三步：

1、导入webpack模块

2、在webpack-dev-server配置对象中开启热重载

3、在插件节点中创建热重载的模块对象

因而 相比较而言 更推荐使用配置方式一

const path=require("path")

// 导入webpack模块 - 启用热重载的第一步

const webpack=require("webpack")

module.exports={

entry:path.join(__dirname,"./src/main.js"),

output:{

path:path.join(__dirname,"./dist"),

filename:"bundle.js"

},

// 配置webpack-dev-server的配置对象

devServer:{

open:true, // 自动打开浏览器

port:8888, // 设置启动时的运行端口

contentBase:"src", // 指定进入服务器后默认访问路径

hot:true // 启用热重载的第二步

},

// 配置插件节点

plugins:[

// 创建一个热重载的模块对象 - 启用热重载的第三步

new webpack.HotModuleReplacementPlugin()

]

}

标签：插件,配置,dev,js,webpack,重载,server

来源： https://blog.csdn.net/Piconjo/article/details/105726663