webpack自動刷新

itvincent 發(fā)布于2019-08-19 17:34 / 1039人閱讀

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

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,不用添加官網(wǎng)上說的--inline --hot參數(shù)

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

這種方式的缺點:

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

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

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

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

代碼

參考   
官網(wǎng)文檔

云服務(wù)器 GPU云服務(wù)器自動刷新代碼 html自動刷新 cdn自動刷新自動刷新設(shè)置教程

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/78640.html

相關(guān)文章

Express結(jié)合Webpack的全棧自動刷新

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

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

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

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

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

DataPipeline 2019-08-26 18:27 評論0 收藏0
webpack學(xué)習(xí)（三）—— webpack-dev-server

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

CKJOKER 2019-08-20 12:03 評論0 收藏0
Webpack 和 React 實戰(zhàn)

摘要：首先安裝然后在的里面加入和兩個命令在建立一個服務(wù)器為你的代碼創(chuàng)建源地址。更新使用語法編寫修改加載器的配置方法將添加文件改為在中配置加載器的配置方法接下來需要配置，告訴我們使用了和插件。 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 項目構(gòu)建：（三）開發(fā)環(huán)境——本地服務(wù)器搭建

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

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