webpack自動刷新

itvincent 發布于2019-08-19 17:34 / 975人閱讀

摘要：不修改配置文件推薦運行瀏覽器打開在中添加運行瀏覽器打開修改配置文件運行不用添加官網上說的參數瀏覽器打開這種方式的缺點會生成多余的文件，并且只能手動刪除配置文件中的只能為數組，不能用于多個入口的情況上

webpack.config.js

var path = require("path");

module.exports = {
  entry: {
    index:"./js/components/index"
  },
  externals: [{
    "react-dom":"ReactDOM",
    "react":"React"
  }],
  output: {
    path:path.resolve(__dirname,"js/components"),
    filename: "bundle.js"
  },
  module: {
    loaders:[
    {
      test: /.js[x]?$/,
      include: path.resolve(__dirname, "js/components"),
      loader: "babel",
      query: {
        presets: ["es2015","react"]
      }
    },
    ]
  },
  resolve: {
    extensions: ["", ".js", ".jsx"],
    alias:[
    {"react-dom":"./libs/react-dom.js","react":"./libs/react.js"}
    ]
  }
};

1.html

...

不修改配置文件(推薦) Iframe mode

運行webpack-dev-server

瀏覽器打開http://localhost:8080/webpack-dev-server/1.html

Inline mode

在1.html中添加

運行webpack-dev-server

瀏覽器打開http://localhost:8080/1.html

修改配置文件

webpack.config.js

...
module.exports = {
  entry: ["webpack/hot/dev-server","webpack-dev-server/client?http://localhost:8080","./js/components/index"],
  ...
  plugins: [
  new webpack.HotModuleReplacementPlugin()
  ]
};

運行webpack-dev-server,不用添加官網上說的--inline --hot參數

瀏覽器打開http://localhost:8080/1.html

這種方式的缺點:

會生成多余的js,json文件，并且只能手動刪除

配置文件中的entry只能為數組，不能用于多個入口的情況

    ...
    entry: {
        a: "./a",
        b: "./b",
        c: ["./c", "./d"]
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].entry.js"
    }
    ...

上面所有方式都需要先運行webpack -w監聽文件變化

代碼

參考
官網文檔

云服務器 GPU云服務器自動刷新代碼 html自動刷新 cdn自動刷新自動刷新設置教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78640.html

Express結合Webpack的全棧自動刷新

摘要：如果修改的是里的文件，保存后，服務器將自動重啟，瀏覽器會在服務器重啟完畢后自動刷新。從開始首先，已經想到了開發流程中的自動刷新，這就是。在以前的一篇文章BrowserSync，迅捷從免F5開始中，我介紹了BrowserSync這樣一個出色的開發工具。通過BrowserSync我感受到了這樣一個理念：如果在一次ctrl + s保存后可以自動刷新，然后立即看到新的頁面效果，那會是很棒的開...

Simon 2019-08-21 13:30 評論0 收藏0
從零開始的webpack生活-0x002：devServer自動刷新

摘要：概述上一章已經實現了最簡單的配置文件使用和監聽功能，這一章要開始實現自動刷新。只能在終端中使用的在章節中指令后標有可以使用的功能，快速調用終端最終項目文件夾結構資源源代碼 0x001 概述上一章已經實現了最簡單的webpack配置文件使用和webpack監聽功能，這一章要開始實現自動刷新。 0x002 瀏覽器自動刷新創建新的項目框架 - webpack_study + ...

AlanKeene 2019-08-21 17:27 評論0 收藏0
webpack devServer 無法自動刷新瀏覽器，但是可以自動編譯

摘要：后面設置的輸出路徑都以此為基礎用于文件路徑查找抽離文件自動生成文件熱模塊更新把注釋掉之后，可以加載成功文件和自動刷新了。估計是因為把文件都抽離到這里了，所以在下，引用和沒有效。只是估計，新手上路，目前對的使用還是摸石過河。這幾天在學習webpack使用中，發現的一個問題，記錄一下問題：1.webpack devServer 無法自動刷新瀏覽器，但是可以自動編譯2.無法加載js文件（不...

DataPipeline 2019-08-26 18:27 評論0 收藏0
webpack學習（三）—— webpack-dev-server

摘要：在項目根目錄下創建，通過這個文件來起服務。到這里為止，自動刷新的內容基本講完了。注意到一點，目前自動刷新都是刷新整個頁面。其中表示熱加載模塊，表示。后續我還會進行更深入的學習，希望和大家共同進步。本文主要介紹以下兩方面的內容： webpack-dev-server自動刷新熱加載（Hot Module Replacement）自動刷新 webpack-dev-server提供了...

CKJOKER 2019-08-20 12:03 評論0 收藏0
Webpack 和 React 實戰

摘要：首先安裝然后在的里面加入和兩個命令在建立一個服務器為你的代碼創建源地址。更新使用語法編寫修改加載器的配置方法將添加文件改為在中配置加載器的配置方法接下來需要配置，告訴我們使用了和插件。 TL;DR $ git clone https://github.com/nodejh/start-react-with-webpack react-sample $ cd react-sample &...

gxyz 2019-08-22 10:47 評論0 收藏0
webpack 項目構建：（三）開發環境——本地服務器搭建

摘要：上一章我們了解了的編譯環境搭建項目構建二編譯環境搭建這一章我們會結合的，介紹本地測試服務器的搭建過程。三開發環境有一些特性是專門用于開發環境的，可以幫助我們搭建一個更好的開發環境。我們可以通過配合使用來搭建本地服務。注：以下教程均在 windows 環境實現，使用其他操作系統的同學實踐過程可能會有些出入。 ??上一章我們了解了 webpack 的 ES6 編譯環境搭建：webpack...

tolerious 2019-08-22 15:10 評論0 收藏0