韦德国际1946国际网址:webpack落成热加载自动刷新

作者: 韦德国际1946国际网址  发布:2019-05-28

前端供给反复的退换js和样式,且须要依据浏览器的页面效果不断的做调度;而且一再大家的开采目录和地方公布目录不是同贰个,修改未来须求表露一下;别的一些就是并不是全部的功效都可以直接双击页面就能够观看,大家平常必要在地点用nginx建3个站点来考查(自个儿电脑上ok了才放到测试景况去)。所以借使要用手工刷新浏览器和手动(或点击)发表,还要运转站点,确实是个比很大的体力活。而那叁点webpack能够帮我们做到。

webpack达成热加载自动刷新的艺术,webpack自动刷新

正文介绍了webpack完成热加载自动刷新的法子,分享给大家,具体如下:

韦德国际1946国际网址:webpack落成热加载自动刷新的艺术,server自动刷新。一、webpack-dev-server

三个轻量级的服务

功用:修改代码及时显示到浏览器上。

第一步:安装

npm install webpack-dev-server -g 

韦德国际1946国际网址 1 

其次步:写入到依赖

npm install webpack-dev-server --save-dev

韦德国际1946国际网址 2
其三步:修改webpack配置文件

  module.exports = {
            entry:"./js/index.js",
            output:{
                path:"/",     
 //注意这里的改变,必须是根目录,指定目录无效,因为webpack会在内存中根目录下生成下面文件名。
                filename:"bundle.js"
            },
            module:{
                loaders:[
                    { test:/.css$/,loader:'style-loader'},
                    { test:/.css$/,loader:'css-loader'}
                ]
            },
            resolve:{
                extensions:['.vue','.js',".css",'jsx'] //自动补全识别后缀
            }
    }

证实:借使想钦命输出目录你须求本人学习 Content Base 命令的运用。

第四步: 修改index.html

<script type="text/javascript" src="bundle.js"></script>

第陆步:运营如下命令 达成全自动刷新。

webpack-dev-server --hot --inline  

说明:

webpack-dev-server的默许端口号是8080

第六步:

访问 然后修改css就能够马上看到反应在网页上了。

如上就是本文的全体内容,希望对大家的求学抱有支持,也希望我们多多援助帮客之家。

本文介绍了webpack完毕热加载自动刷新的艺术,分享给大家,具体如下: 壹、webpack-dev-s...

韦德国际1946国际网址,watch

  首先介绍watch选项,参谋这里。可完毕相关源文件改变后自行更新bundle.js文件的职能。在配置文件中增添watch:true 或实施 webpack -w,就可以张开watch功用;

  测试开采,与(3个或五个)bundle.js有关的具有js、css等模块产生变化,就能够自动推行打包,更新硬盘上的bundle.js文件。

正文介绍了webpack实现热加载自动刷新的诀要,分享给大家,具体如下:

webpack-dev-serverwebpack

webpack-dev-server

  webpack-dev-server暗中同意开启以上的监视成效。但双方监视效果存在差距:

  1. webpack-dev-server自带的监视活动打包功用,新包装的文件存在于内部存储器中,对硬盘上的bundle.js无影响。新文件的内部存款和储蓄器路线与配置文件中的publicPath相关,如
  2. 手动推行webpack -w来运维的watch效果,会修改硬盘上的bundle.js文件

  借使在布局文件中布局了publicPath(未有配备的话暗中认可是是  /):

    output: {
        path: __dirname   "/dist",
        filename: "bundle.js",
        publicPath: "/p/"
    },

  则webpack-dev-server 的监视功效只会更新内部存款和储蓄器中的文本,如 以上就是  那一个门路下的文书也会更新,而且会自动刷新。

  到这里能够知道为:

  1. 卷入后文件的内部存款和储蓄器路线 = devServer.contentBase output.publicPath output.filename,只好通过浏览器来拜访那个路由来访问内部存款和储蓄器中的bundle
  2. 使用webpack打包更新的文件硬盘路线 = output.path output.filename
  3. 在路由前增加/webpack-dev-server/,只要源文件产生变化,那么些地址下的页面都会活动刷新。以地点的/webpack-dev-server/p/bundle.js为例,自动刷新后页面包车型地铁内容为/p/bundle.js。(这里实在正是后边会说起的iframe格局)

  对于publicPath,有三个用处:

  1. 像上述的被webpack-dev-server作为在内部存款和储蓄器中的输出目录。
  2. 被别的的loader插件所读取,修改url地址等。

一、webpack-dev-server

是由此webpack-dev-server(WDS)来促成自动刷新。WDS是一个运行在内部存款和储蓄器中的开辟服务器(3个express)。运维今后,它会检验文件是不是发生转移并再自行编写翻译二次。

机关刷新

  根据文档的唤起。自动刷新有二种方法:

iframe模式

  使用那些方式没有须要此外的配备,但必要更改页面包车型客车拜会路线,比如要拜访根目录下的首页,源链接是  要求换来 。访问那些延续时,查看页面包车型客车dom结构,开掘页面是松开到2个iframe中显示的:

韦德国际1946国际网址 3

修改相关联模块文件时,这些页面会自动刷新。

inline模式

  以此情势中有三种选拔办法,分别是node和html情势。inline形式下访问页面无需像iframe格局那样供给改造访问的路径,inline方式下只要求访问源路线即可

html格局:在需求活动刷新的页面中增加如下脚本就可以,不供给像文书档案所说那样供给添加--inline参数 可能 配置丰盛 devServer: { inline: true }

<script src="http://localhost:8080/webpack-dev-server.js"></script>

  精通正是当webpack-dev-server自带的watch检验到变化时,会通过上述的这么些js来使浏览器自动刷新

node方式:

  对于这里的精通实际正是,不直接运行webpack-dev-server指令了,而是经过node来运维webpack-dev-server。node代码如下:

var config = require("./webpack.config.js");
var webpack = require("webpack");
var WebpackDevServer = require("Webpack-dev-server");
config.entry.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {});
server.listen(8080);

  光光运营这段代码是不能使浏览器自动刷新的,因为那意义无非是运作了webpack-dev-server而已,还索要相当以上说的html情势来使浏览器自动刷新。

总结inline模式

  就是一向或透过node来直接运转webpack-dev-server来检验文件变化,自动打包,然后再html中增加1个额外js来使浏览器自动刷新。以上代码中允许webpack的动态配置,即在js中布置运营,而无需去修改配置文件。

 

回溯一个注重

  webpack-dev-server检查评定到变化自动打包后,新卷入后的文书实际上存在于内部存款和储蓄器中,而硬盘上的bundle.js还是是旧的。所以就算浏览器自动刷新了,读取的是硬盘上的公文,页面刷新后,还是和刷新前的页面同样。

化解办法有七个:

  1. 使页面读取内部存款和储蓄器中的文本。将页面中的bundle.js路线修改为内部存款和储蓄器路线(上文有涉嫌),不引入这种艺术
  2. 更新硬盘上的公文。即张开webpack-dev-server的同期,初步webpack -w。前者的意义时使浏览器自动刷新,后者的意义是翻新硬盘上的文本。
  3. 【推荐】。在webpack的output配置中,使文件的输出路线与内部存款和储蓄器路径一致。如:

    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath:"dist"
    },
    devServer: {
         contentBase: "."
    }
    
    // 或者
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        contentBase: './dist',
        hot: true
    }
    

  因为webpack-dev-server对于文本请求会预先到内存中查找,未有的话再转到硬盘上。所以这么浏览器访问/dist/bundle.js时,能访问到内部存款和储蓄器中的文本,而且当未有运行server时,访问的刚刚正是对应文件在硬盘上的门道。那样一来,在开荒的时候,修改和读取的文书都以内部存款和储蓄器中的文本,能升迁开拓功效。

  而且更首要的是,不那样配置来讲,hmr会无效的。

三个轻量级的劳务

1.安装

功能:修改代码及时展现到浏览器上。

npm install webpack-dev-server --save-dev

第一步:安装

先经过npm将其安装到支付目录。安装实现今后会在node_modules/bin下找到。

npm install webpack-dev-server -g 

2.npm启动

韦德国际1946国际网址 4 

下一场修改package.json:(基于上1节)

第3步:写入到依据

"scripts": {
  "start": "webpack-dev-server --env development",
  "build": "webpack --env production"
 }
npm install webpack-dev-server --save-dev

到现在就足以由此npm run start 大概 npm start来运营了。

韦德国际1946国际网址 5
其三步:修改webpack配置文件

韦德国际1946国际网址 6

  module.exports = {
            entry:"./js/index.js",
            output:{
                path:"/",     
 //注意这里的改变,必须是根目录,指定目录无效,因为webpack会在内存中根目录下生成下面文件名。
                filename:"bundle.js"
            },
            module:{
                loaders:[
                    { test:/.css$/,loader:'style-loader'},
                    { test:/.css$/,loader:'css-loader'}
                ]
            },
            resolve:{
                extensions:['.vue','.js',".css",'jsx'] //自动补全识别后缀
            }
    }

起步之后,能够看来Project is running at 上边。展开页面

证实:借使想内定输出目录你须求本人读书 Content Base 命令的运用。

韦德国际1946国际网址 7

第四步: 修改index.html

表达WDS已经帮我们自行建了多少个站点.大家修改component.js ,cmd中会出现编写翻译,页面会自动刷新。

<script type="text/javascript" src="bundle.js"></script>

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:韦德国际1946国际网址:webpack落成热加载自动刷新

关键词: webpack betvictor194