• webpack 使用教程--实时刷新测试


    学习webpack,基本始终是围绕:

      1.如何安装webpack
      2.如何使用webpack
      3.如何使用loader
      4.如何使用开发服务器

      可能我们会在如何使用开发服务器的时候,遇到诸如调试的相关问题:

      使用开发服务器

      我们webpack中使用的开发调试服务器通常是 webpack-dev-server,通过这个服务我们更多的是想实现无刷新的处理编译入口文件。 

      通过以下命令全局安装

    1
    npm install webpack-dev-server -g

      启动服务器

    1
    webpack-dev-server --progress --colors

      这会绑定一个小型express服务器到localhost:8080,来为你的静态资源及bundle(自动编译)服务。通过访问http://localhost:8080/webpack-dev-server/bundle,bundle每次重编译后浏览器页面都会自动更新。

      但这里可能会遇到,我们改动js文件,无法实时更新的问题,很大一部分原因是没有理解编译后的bundle是虚拟的问题,本地其实质是没有编译的,所以我们不能用本地的路径去处理,需要进行更改为http://localhost:8080/bundle.js.

      我们可能预想实现无刷新是这样的:

    1. js 文件修改
    2. webpack-dev-server 监控到变化
    3. webpack 重新编译
    4. 实时更新浏览器中的页面

      但可惜的是,http://localhost:8080/index.html 对 js 文件的变化无动于衷,改完之后,手动刷新才能生效。

      webpack-dev-server 提供了两种模式用于自动刷新页面:

    1. iframe 模式

      我们不访问 http://localhost:8080,而是访问http://localhost:8080/webpack-dev-server/index.html

    2. inline 模式

      在命令行中指定该模式,webpack-dev-server --inline。这样http://localhost:8080/index.html 页面就会在 js 文件变化后自动刷新了。

      由于如此我的package.json文件可能就是这样,方便我去快速启动

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    {
      "name""react-sample",
      "version""1.0.0",
      "description""webpack demo",
      "main""./src/entry.js",
      "scripts": {
        "start""webpack-dev-server --inline --hot",
        "build""webpack --display-error-details",
        "watch""webpack --progress --colors --watch"
      },
      "repository": {
        "type""git",
        "url""https://github.com/dwqs/react_practice.git"
      },
      "keywords": [
        "react",
        "webpack"
      ],
      "author""pomy",
      "devDependencies": {
        "babel-core""^5.8.25",
        "babel-loader""^5.3.2",
        "react""^0.14.5",
        "react-dom""^0.14.5",
        "react-hot-loader""^1.3.0",
        "webpack""^1.12.2",
        "webpack-dev-server""^1.14.0"
      }
    }

      解释一下官方推荐的无刷新:

      示例代码:

      package.json

    "scripts": {
        "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build",
        /*build导致找不到页面 cannot file*/
        "hot": "webpack-dev-server  --devtool eval --progress --colors --hot --content-base",
      }

       webpack.config.js

    复制代码
    module.exports = {
        entry: [
          'webpack/hot/dev-server',
          'webpack-dev-server/client?http://localhost:8080',
          path.resolve(__dirname, './src/entry.js')
        ]
    };
    复制代码

      官方的无刷新,其实是在前面讲到的iframe实现的实时刷新,如果我们,至进行http://localhost:8080/index.html是不会进行实时刷新的。还有一点,就是官方后面加的build,作用时让其监测,打包出bundle.js,但亲测会导致,到cannot page file, 所以建议,调试完毕之后,手动打包。

     

      最近给大家一个建议,多看官方的示例文档,这才是快速入门的最佳渠道,webpack官方文档。 

       注意:通常我们设置好webpack-dev-server服务自动刷新预览功能之后,发现手机预览不了,其实是由于webpack-pack-server服务安全机制导致的,只允许本机访问,我们可以把host设置为0.0.0.0就可以允许或者设置为本机地址。

      解决参考资料:stackoverflow问答  stackoverflow问答2  github isuues

    参考资料:

      webpack 使用教程

      Webpack-dev-server结合后端服务器的热替换配置

      webpack入门(译)

      webpack插件实现实时刷新

      WebPack 常用功能介绍

      在express服务中搭建webpack-dev-server

      基于webpack搭建前端工程解决方案探索

      自己在项目中实现的热更新

    简简单单,pfan!出来混的,一切都是要还的。
  • 相关阅读:
    mac 外接显示屏的坑
    ssh 多秘钥管理和坑
    CircleCI 前端自动部署
    jest 事件测试
    await Vue.nextTick() 的含义分析
    Jest 里面需要注意的几个小细节
    element 库 date-picker 的 disabledDate 的坑
    jest 提示 Unexpected identifier 的解决方案
    preventDefault 和 stopPropagation
    数据库:Flask-SQLAlchemy
  • 原文地址:https://www.cnblogs.com/chris-oil/p/6241741.html
Copyright © 2020-2023  润新知