webpack开启本地服务器与热更新

  • 第一个webpack本地服务
  • webpack本地服务相关的一些操作指令与应用

一、第一个webpack本地服务

//工作区间
    src//文件夹
        index.js//入口文件
        index.css//测试样式文件
        index.html//结构文件
    package.json//打包系统配置信息
    webpack.config.js//打包配置

需要下载安装的加载器和插件:

1 npm install webpack --save-dev
2 npm install webpack-cli --save-dev
3 npm install style-loader --save-dev
4 npm install css-loader --save-dev
5 npm install html-webpack-plugin --save-dev
6 npm install clean-webpack-plugin --save-dev
7 npm install webpack-dev-server -g
8 npm install webpack-dev-server -save-dev

一定要注意先在全局安装webpack-dev-server,然后再在局部工作区间安装。然后测试代码非常简单,只需要一个html默认生成结构,css给body设置背景色,然后再入口文件index.js中引入css文件。接着使用下面这份打包配置,如果对我前面博客的webpacd内容都有了解你会发现这是个最简单的配置:

 1 var path = require(‘path‘);
 2 var {CleanWebpackPlugin} = require(‘clean-webpack-plugin‘);
 3 var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
 4 module.exports = {
 5     entry:{
 6         index:‘./src/index.js‘
 7     },
 8     output:{
 9         path:path.resolve(__dirname,‘dist‘),
10         filename:‘[name][hash:5].bundle.js‘
11     },
12     module:{
13         rules:[
14             {
15                 test:/\.css$/,
16                 use:[
17                     {loader:‘style-loader‘},
18                     {loader:‘css-loader‘}
19                 ]
20             }
21         ]
22     },
23     plugins:[
24         new CleanWebpackPlugin(),
25         new HtmlWebpackPlugin({
26             template:‘./src/index.html‘
27         })
28     ],
29     mode:‘development‘
30 }

执行:webpack测试是否配置成功,在配置成功的情况下执行下一行指令。

执行:webpack-dev-server。执行玩成功的话webpack就开始对作用域中的代码文件执行监听,控制台的指针一直处于闪烁状态。然后找到刚刚的执行说明,在说明里找到生成的本地端口链接,下面是我测试生成的端口链接截图(把链接直接粘贴进浏览器链接栏):

你会发现链接的网页就是你刚刚编辑打包好的html页面,这时候再回到编辑器修改样式(修改body背景色),修改好以后保存,这时候页面会自动刷新,然后在测试js代码,在js中编辑一个console.log(‘hello’)打印指令,编辑后保存可以看到在浏览器控制自动打印了hello。以上的操作就是本地服务的功能,在很多公司中前端为了提高开发效率会使用双屏同时工作,一个编码一个展示时时的效果,就可以使用webpack-dev-server来实现。

既然是服务,当然少不了数据请求操作,接下来就使用以下ajax请求:

npm install jquery --save-dev

然后,将config文件中的清除打包文件的clean-webpack-plugin注释,因为需要再dist文件夹中缓存一个json文件,用来测试服务器数据请求(json文件的数据任意):

//        new CleanWebpackPlugin(),

然后启动服务并重新用新生成的链接打开页面(开启浏览器控制台):

webpack-dev-server

接着在编辑器中编辑index.js,写入一个jQuery的ajax请求来请求本地服务器中的JSON数据:

import ‘./index.css‘;
// var $ = require(‘jquery‘);
import $ from ‘jquery‘;
$.ajax({
    url:‘http://localhost:8081/dist/data.json‘,//注意这个路径是由生成的链接+打包文件夹路径+json文件名
    success:function(data){
        console.log(data);
    },
    error:function(){
        console.log(‘error‘);
    }
})

当你编辑好index.js保存时就你会发现,可以的通过ajax向本地服务器发生请求。

二、webpack本地服务相关的一些操作指令与应用

因为程序使用默认端口的原因,可能会出现端口冲突的问题,如果端口冲突的话可以再config.js文件中配置端口:

1 module.exports = {
2     devServer:{
3         port:‘9091‘
4     }
5 }

将这个配置添加到配置文件中,就可以在指定的端口上开启服务,但是有一点需要注意的是,如果修改配置文件时服务是开启状态的话,并不会自动刷新,需要手动关闭当前监听,然后启动才会生效。(CTRL + C 热键关闭服务)

因为webpack本地服务监听项目代码,并不监听打包环境的config.js配置文件,所以需要重新开启服务。接着上面的配置,还可以添加一个配置属性来指定服务器地址,默认情况下服务器区间是在控制台开启服务的位置,由于这个区间就是工作区间,下面除了包含生成的代码dist文件夹,还有代码文件夹src和配置文件等,为了更好的区分服务器和开发环境可以添加以下配置:

1     devServer:{
2         port:‘9091‘,
3         contentBase:‘dist‘
4     },

如果更改了服务器空间,那么ajax的请求就肯定需要改了,之前路径中的dist这层需要删除才能找到data.json。

url:‘http://localhost:9091/data.json‘,

到这一步是不是发现有一个操作很不方便,就是需要手动复制链接或者手动去浏览器输入链接,webpack怎么会这么不方便呢?下面这个指令帮你解决:

webpack-dev-server --open//开启本地服务器是自动在默认浏览器打开页面

由于开启服务后,每一次触发更新页面就在控制带打印出相关的信息,在调试中需要debug的话去查看控制台清一色的白色提示信息会让你很难受,这时候你只需要这样做:

webpack-dev-server --open --color

指令后面添加--color指令,控制台的提示信息就会有不同的颜色来区分不同的信息。

三、热更新:hot module replace

前面介绍了开启本地服务和自动刷新页面,注意“自动刷新页面”这句话,在前端开发中对于这句话应该会非常敏感,因为刷新页面就意味着将数据全部重新请求一次,这种事情除了第一次请求页面以后就不应该出现在前端服务中,想想你每一次保存源代码文件都会触发一次所有网络请求、编译、执行,估计一天的工作时间就有一半的时间在等待页面刷新中了,在我们的测试代码中由于源代码体量非常小无法感知,如果在实际开发中你想想请求一个页面会有多大。这个问题的严重性说的比较多了,接下来来看webpack怎么实现局部刷新来解决性能问题:

通过webpack模块的内置插件开启css修改代码实现局部刷新:(在config配置文件中添加以下配置)

 1 var Webpack = require(‘webpack‘);//引入webpack模块
 2 ...
 3 module.exports = {
 4     plugins:[
 5         ...
 6         new Webpack.HotModuleReplacementPlugin()//引入局部刷新插件
 7     ],
 8     devServer:{
 9         ...
10         hot:true//开启热更新
11     }
12 }

添加上面的配置以后,在开启服务更新css代码,就可以实现热更新(局部刷新),而不是刷新整个页面了。但是这个配置还不能解决js代码的局部刷新,js热更新需要以下配置:

js热更新只需要在前面配置的基础上,只需要在js中添加这段代码(提醒:添加在js代码文件中):

//判断是否开启热更新,如果开启了则对js文件执行热更新操作
if(module.hot){
    module.hot.accept();
}

识别js是否热更新,就看浏览器控制台的打印结果是否会在更新时被清空,如果每一次更新都清空就说明是页面刷新,如果是在原来的打印结果下面添加更新打印结果就开启了热更新。

最后提供配置文件代码和js代码:

 1 var path = require(‘path‘);
 2 var {CleanWebpackPlugin} = require(‘clean-webpack-plugin‘);
 3 var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
 4 var Webpack = require(‘webpack‘);
 5 module.exports = {
 6     entry:{
 7         index:‘./src/index.js‘
 8     },
 9     output:{
10         path:path.resolve(__dirname,‘dist‘),
11         filename:‘[name][hash:5].bundle.js‘
12     },
13     module:{
14         rules:[
15             {
16                 test:/\.css$/,
17                 use:[
18                     {loader:‘style-loader‘},
19                     {loader:‘css-loader‘}
20                 ]
21             }
22         ]
23     },
24     plugins:[
25         // new CleanWebpackPlugin(),
26         new HtmlWebpackPlugin({
27             template:‘./src/index.html‘
28         }),
29         new Webpack.HotModuleReplacementPlugin()
30     ],
31     devServer:{
32         port:‘9091‘,
33         contentBase:‘dist‘,
34         hot:true
35     },
36     mode:‘development‘
37 }

config配置文件代码

 1 import ‘./index.css‘;
 2 // var $ = require(‘jquery‘);
 3 import $ from ‘jquery‘;
 4 $.ajax({
 5     url:‘http://localhost:9091/data.json‘,//注意这个路径是由生成的链接+打包文件夹路径+json文件名
 6     success:function(data){
 7         console.log(data);
 8     },
 9     error:function(){
10         console.log(‘error‘);
11     }
12 })
13 console.log(‘热更新了吗?‘);
14
15 //判断是否开启热更新,如果开启了则对js文件执行热更新操作
16 if(module.hot){
17     module.hot.accept();
18 }

测试的js代码(最后全部的)

原文地址:https://www.cnblogs.com/ZheOneAndOnly/p/11117860.html

时间: 2024-10-07 05:16:15

webpack开启本地服务器与热更新的相关文章

在vue项目中添加一个html页面,开启本地服务器

在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面,但是我的vue项目没有public,就只好放在static里面了,这样可以不经过vue的路由 2.然后就是开本地服务器,当然,是基于node的, 1)可以在这里下载 https://nodejs.org,安装完成后可以在控制台输入:node -v 查看版本号 2)下载http-server:在控制

使用webpack构建本地服务器

想不想让你的浏览器监测你代码的修改,并自动刷新修改后的结果,其实Webpack提供一个可选的本地开发服务器,这个本地服务器基于node.js构建,可以实现你想要的这些功能,不过它是一个单独的组件,在webpack中进行配置之前需要单独安装它作为项目依赖 npm install webpack-dev-server –g  在package.json里配置: "dev": "webpack-dev-server --port 8080 --colors --progress -

【转】tomcat搭建本地服务器 实现apk更新下载

转自:http://www.kankanews.com/ICkengine/archives/121748.shtml 做apk的更新下载功能,测试的时候需要个服务器. 所以就选用 Apache Tomcat 搭建一个本地的服务器,测试之用. Apache Tomcat官方地址:  http://tomcat.apache.org/  我下载的为最新版本:7.0.40 1.下载 2.任意解压在磁盘上      3.在tomcat的解压文件中,找到bin目录.在bin文件下面找到startup.b

Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇——多页面VueSSR+热更新Server)

Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇--多页面VueSSR+热更新Server) @(HTML/JS) 这是Vue多页面框架系列文章的第二篇,上一篇(纯前端Vue多页面)中,我们尝试从webpack-simple原型项目改造为一个多页面的Vue项目.而这里,我们继续往前,尝试把Vue多页面改造为Nodejs直出.由于步骤较多,所以本文片幅较长. 本文源代码:https://github.com/kenkozheng/HTML5_research/tr

unity 热更新思路和实现

声明:本文介绍的热更新方案是我在网上搜索到的,然后自己修改了一下,相当于是借鉴了别人的思路,加工成了自己的,在此感谢无私分享经验的朋友们. 想要使用热更新技术,需要规划设计好资源比较策略,资源版本,确保增加新资源后可以下载到本地,有资源更新的时候可以替换掉本地旧资源.我在前面写了一篇"unity 打包AssetBundle"的文章,里面生成了一个资源版本文件,不多解释了,上图.至于怎么生成这个文件的,可以看一下我前面写的文章. 废话不多说. 先介绍热更新步骤,后上代码 步骤一.在Res

ionic cordova 热更新(引用自www.zyyapp.com/post/116.html)

上篇文章cordova 把html打包成安卓应用 http://www.zyyapp.com/post/115.html cordova 热更新是一个大坑,我看了一天一夜才明白.网上的教程都没说到重点,他们只说了在本地调试,没说发布到自己的服务器,只有一篇说了但是也不详细. 下边就是没有坑的教程,包你顺溜的走完流程. 打开命令提示符 进入工程目录,如果你只能在node.js command prompt 中运行cordova命令,那是因为你没有在系统变量path中添加node.js的路径. 添加

Webpack热更新原理

开发环境页面热更新早已是主流,常见的需求如赛事网页推送比赛结果.网页实时展示投票或点赞数据.在线评论或弹幕.在线聊天室等,都需要借助热更新功能,才能达到实时的端对端的极致体验. webpack-hot-middleware webpack-hot-middleware中间件是webpack的一个plugin,通常结合webpack-dev-middleware一起使用.借助它可以实现浏览器的无刷新更新(热更新),即webpack里的HMR(Hot Module Replacement).如何配置

webpack热更新问题和antd design字体图标库扩展

附一张上周末参加jsconf的照片..... 标题也不知道怎么写好,真是尴尬.不过话说回来,距离上一次写文快两个月了,最近有点忙,一直在开发新项目, 今天刚刚闲下来,项目准备提测.借这个功夫写点东西,把新项目上学到的一些好的干活分享一下,以便之后开发的 时候能烂熟于心. 本次分享两个干货,正文从这里开始: 1.很多同学在开发项目前端项目的时候会遇到一个比较影响开发体验的事情,就是在更新样式文件的时候,页面不会热更新.当然前提是在webpack配置项里用了 'extract-text-webpac

使用IntelliJ IDEA过程中webpack无法热更新

最近发现一个问题,就是在使用IntelliJ 的过程中发现webpack的热更新失效,也在网上找过很多的修改webpack.config.js配置文件的方法,但是都没有生效,看着同事们一个一个在愉(tong)快(ku)的撸代码,我怎么能忍!? 后来,经过不断的尝试,更换IDE,发现其实就是IDE的问题.如果你是按照官网上的方式进行安装的webpack,但是还是无法进行热更新,那么下图就是你的福音啦. Setting ---> Appearance & Behavior ---> Sys