zoukankan      html  css  js  c++  java
  • webpack学习笔记八

    webpack自动刷新浏览器

    webpack开发服务器,是webpack官方提供的一个辅助开发工具,它可以自动监控项目下的文件,一旦有修改保存的操作,它就会自动执行打包命令,将我们的代码重新打包,并且需要的话还可以刷新浏览器。

    首先我们安装webpack-dev-server

    CMD中安装执行npm intall webpack-dev-server -g

    在项目目录执行安装依赖命令: npm install --save-dev webpack-dev-server

    其中webpack-dev-server有几个参数

    contetnBase 默认webpack-dev-server 会为根文件夹提供本地服务器,如果想为另外一个目录下的文件提供本地服务器,应该在这里设置其所在的目录(本例设置到“public”目录)

    port 设置默认监听端口,如果省略,默认为 8080

    inline 设置为true ,当源文件改变时会自动刷新页面

    colors 设置为true,使终端输出的文件为彩色的

    historyApiFallback 在开发单页应用时非常游泳,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html

    hot:true 允许热加载

    配置项:

    devServer:{

    contentBase:'./public', //本地服务器所加载的页面所在的目录

    colors:true,

    inline:true, //设置实时刷新

    }

     

    再执行一下npm start

    如何运行一下这个功能?

    webpack-dev-server有两种启动模式:

    iFrame :该模式下修改嗲吗会自动打包,但不会刷新浏览器

    inline: 该模式下修改代码会自动打包,并且会刷新浏览器

    显然,我们需要刷新浏览器

    在命令行中输入:webpack-dev-server --inline

    需要注意的是,现在用浏览器打开index.html需要用localhost:8080或者127.0.0.1:8080,可以在配置项中指定监听端口。

    这里有一个麻烦,打开浏览器的时候如果有弹窗,必须先点击确定之后刷新,能不能有一种只显示已经修改过的地方呢,比如我们只修改颜色,不想点击弹窗都可以看出已经修改了。

    只需要在参数里添加 hot:true即可,

    因为修改了配置项,需要再npm start一下,

    然后执行webpack-dev-server --inline --hot回车

     

    浏览器打开localhost:8080

    修改css文件,会自动修改,而没有修改弹窗的那部分不会被触发。

     

    到此webpack学习笔记结束。

    ----------------------

    如果出现执行webpack-dev-server --inline之后如下问题

    webpack-dev-server: command not found

    显示没有找到命令,有两种解决方法,一是可能没有安装全,那么使用cnpm,如果使用了cnpm还是这样的话,就全局安装一次,比如 cnpm install webpack-dev-server -g

    应该可以解决。再执行webpack-dev-server --inline --hot之类的

    如果不行的话,可以参考http://www.jianshu.com/p/397df5dfd09c

     

  • 相关阅读:
    JS基础学习
    Java_iText_PDF—生成PDF工具
    vc++ 编译连接错误and解决方法
    C++ 数据类型【转】
    jsp两种include指令区别
    程序员面试宝典问题及解析
    vc++6.0快捷键
    vue动态绑定图片和背景图
    配置webpack中dev.env.js、prod.env.js,解决不同命令下项目启动和打包到指定的环境
    配置webpack中externals来减少打包后vendor.js的体积
  • 原文地址:https://www.cnblogs.com/yupinghua/p/6308515.html
Copyright © 2011-2022 走看看