0
点赞
收藏
分享

微信扫一扫

04webpack-webpack-dev-server时时跟新的第二种方式

归零者245号 2022-09-01 阅读 19

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("哈在手我的删除动阀案说现在辞职 法十分哈儿");

});

 

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。


作者:晚来南风晚相识​

本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接

如果文中有什么错误,欢迎指出。以免更多的人被误导。



举报

相关推荐

0 条评论