webpack-dev-server是webpack官方提供的一个小型Express服务器
使用它可以为webpack打包生成的资源文件提供web服务。
webpack-dev-server 主要提供两个功能：
为静态文件提供服务
自动刷新和热替换(HMR)
安装命令:
npm install --save-dev webpack-dev-server（别忘记安装）
第一种方式 自动打开浏览器 端口号 指定托管的跟目录 启动热刷新 这种是在
webpack.json中去配置的
直接在package中 写
将“script”:{ "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"} 这里有4个指令
第二种方式 自动打开浏览器 端口号 指定托管的跟目录 启动热刷新
在webpack.config.js文件中
第一步：引入webpack
const webpack=require("webpack");
第二步:配置
devServer:{ open:true,//自动打开浏览器 port:3000,// 端口号 contentBase:'src',// 指定托管的跟目录 hot:true //启动热刷新 }
第三步：配置热刷新这个插件的节点
plugins: [new webpack.HotModuleReplacementPlugin()]
完整代码如下===》
const path = require("path"); //路径模块 //第2中方式配置webpack const webpack = require("webpack"); // 配置文件 暴露出去哦 // 手动的指定入口和出口 module.exports = { entry: path.join(__dirname, "./src/main.js"), //入口文件 使用webpack要打包哪一个文件 output: { //输出相关的配置 path: path.join(__dirname, "./dist"), //指定打包好的文件会输出到哪一个目录（dist)下去 filename: "testindex.js" //指定打包好的文件的名称叫什么名字 }, devServer: { open: true, //自动打开浏览器 port: 3000, //端口号 contentBase: "src",//指定托管的根目录 hot: true, //启动热刷新 }, plugins: [new webpack.HotModuleReplacementPlugin()] //这个就是热跟新的配置 }; 启用命令 npm run dev
需要注意的地方
因为现在webpack已经是4了；
所以需要安装npm i webpack-cli -D
否者就会报错
Cannot find module 'webpack-cli/bin/config-yargs'
注意下面插件的安装环境
package.json文件内容如下
{ "devDependencies": { "webpack": "^4.44.2", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.0" }, "scripts": { "dev": "webpack-dev-server" }, "dependencies": { "jquery": "^3.5.1" } }
src下的index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="/testindex.js"></script> </head> <body> <div>12</div> <div>222</div> <div>222</div> </body> </html>
注意这里的引用路径，
因为webapck配置的时候，配置的是src目录下的testindex.js
此时你更改这里的代码是不会热跟新的；
src下的main.js
import $ from "jquery"; $(function () { console.log("哈哈1-111啊大苏打"); console.log("哈在手我的删除动阀案说现在辞职 法十分哈儿"); });
此时你发现，自动修改js文件，可以热跟新；
但是index.html却不可以热跟新
import $ from "jquery"; $(function () { console.log("哈哈1-111啊大苏打"); console.log("哈在手我的删除动阀案说现在辞职 法十分哈儿"); });
