zoukankan      html  css  js  c++  java
  • webpack-dev-server的自动更新配置

    一、背景

    测试发布一个项目,修改jsx中的内容,页面不自动更新。
    每次必须执行npm run build;然后执行npm run start。
    脚本如下:

    "scripts": {
      "start": "webpack-dev-server --history-api-fallback --colors --no-info --open",
      "build": "webpack"
    },

    build每次要花6秒左右,效率实在不高。


    二、检查

    1. webpack.config.js

    module.exports = {
      entry: './index.js',
      output: {
      path: path.join(__dirname, 'dist'),
      filename: 'bundle.js'
    }

    看的出,运行文件打包成bundle.js,存放路径在dist目录下。

    2. index.html

    <script src="./dist/bundle.js"></script>

    引用了生成的项目文件bundle.js。


    三、原因

    webpack-dev-server动态生成的包并不发布到你的真实目录中(dist/),而是放在了内存中。

    四、解决

    将项目的指向配置到虚拟服务器中。

    修改index.html中的src路径为:

    <script src="http://localhost:8080/bundle.js"></script>

    五、测试

    1. 执行npm run build。
    2. 然后执行npm run start。
    3. 修改jsx文件,保存。

    哈哈,自动更新了。

    这些再也不用修改一个label命名也要重启了- -!

  • 相关阅读:
    014 要区分好slice,splice和split,方法如下
    108 shutil模块(了解)
    107 pathlib模块(了解)
    106 collections模块
    105 typing模块
    104 re模块
    103_01 matplotlib模块
    102 pandas模块
    101 numpy模块
    SQLserver找出执行慢的SQL语句
  • 原文地址:https://www.cnblogs.com/yoyotl/p/7207591.html
Copyright © 2011-2022 走看看