webpack-dev-server的基本使用

简介: 一、上节代码二、main.js文件三、下载webpack-dev-server四、设置自动打开网页

webpack-dev-server的基本使用

 

内容介绍:

一、上节代码

二、main.js文件

三、下载webpack-dev-server

四、设置自动打开网页

 

一、上节代码


代码:

将入口文件的ok改为ook

<!DOCTYPE html>

<htm1 lang= "en">

<head>

<meta charset="UTF- 8">

<meta name="viewport" content=width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible"content="ie=edge">

<title>index首页</title>

<script scr =../dist/main.js></ script >

</head>

 

<body>

<h1>这是首页</h1>

</body>

</html>

 

二、main.js文件


代码:

//假设,main.js还是我们的入口文件

Console.log(‘ook’)

保存后在网页里面刷新(刷新后结果如下:)

image.png

为什么没有变呢(应该变为ook)?原因在于并没有重新打包,所以运行后在网页里面刷新结果还是没有变。在index.html中,去手动导入了一个main.js这个包,这是上次已经打包的文件,但是这个次代码有变化,就要重新打包。像这样每次代码改变都要去打包,是很麻烦的,所以要去配置一下实时的打包编译,在软件终端上输入代码(代码如下:)

代码:

npm i webpack-dev-server -D

server之前是这么配置的现在也是这么配置,它提高了我们打包的速度,提高了编写代码的效率,提高了一些默认的约定。(详细讲解如下:)

代码:

//向外暴露一个打包的配置对象;―因为 webpack是基于Node构建的;所以 webpack支持所有Node API和语法module.exports = {

mode : 'development' , // development production

// webpack 4.x 中,有一个很大的特性,就是约定大于配置﹑约定,默队的打包入口路径是 src -> index.js

}

 

//行不行?目前不行;

//这是 Es6中向外导出模块的APT 与之对应的是import ** from‘标识符

// export default {}

//那些特性Node支持呢?如果 chrome 浏览器支持哪些,则Node就支持哪些;

 

三、下载webpack-dev-server


下载完成之后打开package.json这个个文件,继续在下面些diamagnetic。(代码如下:)

代码:

           {

           "name":"01.webpack-base" ,

"version": "1.o.o",

"cescription": ""

"main": "index.js" ,

"scripts": {

     "test": "echo \ "Error: no test specified\ " && exit 1",

"dev": "webpack-dev-server"

}

           "keywords": [],

"author": "",

 

然后在终端运行代码(npm run dev),在执行的时候它自己回去我们的代码里面找这个脚本,看见Compiled successfully.就是编译成功了。之前编译成功就退出了,现在执行了没有退出,因为它要观察自己的代码变化,只要你的代码变化它这里就会更改。当前项目运行在: Project is running at http://localhost:8888/当前本机的8080端口上,webpack output is served from /表示当前项目运行在本机的跟路径上,可以进去这个路径下看看(如下图:)

image.png

在这里面有创建的项目,在访问这个路径http://localhost:8888/main.js就是js文件。

进入到项目中查看原代码,里面还是ok,但是我们写入的ook。在到原代码中可以看到,我们选着的路径是ok打包的路径<script src=" ../dist/mnain.js"></script>。在网页可看见,在我们的网页里面是没有main.js这个选项得,它生成之后就把这个生成的东西传入到库里面,没有显示在本地的磁盘里面,但是想使用main.js的时候就直接在些根目录下main.js就可以了(详细看下代码:)

代码:

// webpack-dev-server 打包好的 main.js是托管到了内存中;所以在项目根目录中看不到;

//但是,我们可以认为,在项目根目录中,有一个看不见的 main .jsI

如何写index.html代码?

代码:

将入口文件的ok改为ook

<!DOCTYPE html>

<htm1 lang= "en">

<head>

<meta charset="UTF- 8">

<meta name="viewport" content=width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible"content="ie=edge">

<title>index首页</title>

<script scr =../dist/main.js></ script >

</head>

 

<body>

<h1>这是首页</h1>

</body>

</html>

 

刚刚它把<script scr =../dist/main.js></ script >

位置写死了,但是在我们的更目录下,所以把

<script scr =../dist/main.js></ script >

改为

<script scr =/main.js></ script >就可以了。

然后在到网页上去刷新,原先的ok就会变成ook

 

四、设置自动打开网页


"dev"里面添加"dev": "webpack-dev-server --open --port 3oo0 --hot –127.0.0.1"},就可以实现项目运行后网页自动打开。

代码:  

         {

"name": "o1.webpack-base" ,"version": "1.0.0"" ,          

"description": """main" : "index .js" ,"scripts": {          

"test": "echo \ "Error: no test specified\ " && exit 1"",              

"dev": "webpack-dev-server --open --port 3oo0 --hot –127.0.0.1"},

}

             "keywords": [],

             "author" : "",

             ""license": "ISC" ,

             "devDependencies" : {

             wnnoaao~"webpack" : "^4.1.1",

             "webpack-cli": ""^2.0.12",

"webpack-dev-server": "3.1.1"}

}

 

     最后出现像下图这个样子的网页(看下图:)

image.png

如果想要其它浏览器来打开的话,就在

"dev": "webpack-dev-server --open --port 3oo0 --hot –127.0.0.1"}

里面的open后面加上浏览器的英文名,

例如:

火狐 "dev": "webpack-dev-server –open firefox --port 3oo0 --hot –127.0.0.1"}

要确保自己安装了火狐的浏览器,然后就重启运行。

相关文章
|
24天前
|
移动开发 JavaScript 前端开发
webpack学习四:使用webpack配置plugin,来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发
这篇文章主要介绍了如何通过配置Webpack的插件,如HtmlWebpackPlugin、uglifyjs-webpack-plugin和webpack-dev-server,来简化前端开发流程。
31 0
webpack学习四:使用webpack配置plugin,来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发
|
4月前
|
JavaScript 前端开发 应用服务中间件
|
6月前
|
缓存 JavaScript 前端开发
webpack学习笔记--基本配置
webpack学习笔记--基本配置
|
6月前
|
JavaScript 网络协议 前端开发
深入 webpack,直接使用 webpack-dev-server 轻松创建一个可以热加载的本地服务器
深入 webpack,直接使用 webpack-dev-server 轻松创建一个可以热加载的本地服务器
214 0
|
12月前
|
JavaScript 前端开发 Windows
vue项目中webpack-dev-server的open和host0.0.0.0配置冲突
一个比较老的公司项目,webpack 用的 v3 版本,为了实现localhost、127.0.0.1和本机ip可以同时访问,webpack的devServer里的 host 我们一般会设置成 0.0.0.0,这样本机所有 ipv4 地址都可以实现访问
137 0
|
前端开发
前端学习笔记202303学习笔记第三天-Vue3.0-webpack安装和配置webpack-dev-server
前端学习笔记202303学习笔记第三天-Vue3.0-webpack安装和配置webpack-dev-server
76 0
|
Web App开发 JavaScript 前端开发
webpack-dev-server 的基本使用|学习笔记
快速学习 webpack-dev-server 的基本使用
123 0
webpack-dev-server 的基本使用|学习笔记
|
JSON 前端开发 JavaScript
webpack-dev-server 的基本使用| 学习笔记
快速学习 webpack-dev-server 的基本使用
webpack-dev-server 的基本使用| 学习笔记
|
前端开发 JavaScript 开发者
webpack-dev-server 的常用命令参数| 学习笔记
快速学习 webpack-dev-server 的常用命令参数
webpack-dev-server 的常用命令参数| 学习笔记
|
JavaScript
Vue课程9-安装和配置webpack-dev-server
Vue课程9-安装和配置webpack-dev-server
70 0
Vue课程9-安装和配置webpack-dev-server