Webpack实用工具之webpack-server

Webpack实用工具之Webpack-server

一、webpack-server的原理简单解读

  • 使用webpack-server时,webpack-server会为我们的当前的项目开启一个服务器,将其中的文件放入到该服务器*我们进行访问,并且还会隐式的在项目的根路径下生成一个bundle.js文件,该文件就是编译后的js文件,并且我们每修改入口文件并保存时,该文件都会自动被编译后更新到服务器上。

二、使用webpack-server

  • 使用之前请提前安装好webpack 并配置文件
  • 使用指令 【npm install webpack-dev-server -D】 安装webpack-server
  • 在package.json中的scripts节点中配置webpack-server脚本

Webpack实用工具之webpack-server

  • 启用热部署并打开浏览器

Webpack实用工具之webpack-server

  • 运行脚本 npm run dev2
    Webpack实用工具之webpack-server
    Webpack实用工具之webpack-server