webpack自動(dòng)刷新

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

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

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

運(yùn)行webpack-dev-server

瀏覽器打開(kāi)http://localhost:8080/webpack-dev-server/1.html

Inline mode

在1.html中添加

運(yùn)行webpack-dev-server

瀏覽器打開(kāi)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()
  ]
};

運(yùn)行webpack-dev-server,不用添加官網(wǎng)上說(shuō)的--inline --hot參數(shù)

瀏覽器打開(kāi)http://localhost:8080/1.html

這種方式的缺點(diǎn):

會(huì)生成多余的js,json文件，并且只能手動(dòng)刪除

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

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

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

代碼

參考   
官網(wǎng)文檔

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/78640.html

相關(guān)文章

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

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

Simon 2019-08-21 13:30 評(píng)論0 收藏0
從零開(kāi)始的webpack生活-0x002：devServer自動(dòng)刷新

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

AlanKeene 2019-08-21 17:27 評(píng)論0 收藏0
webpack devServer 無(wú)法自動(dòng)刷新瀏覽器，但是可以自動(dòng)編譯

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

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

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

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

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

gxyz 2019-08-22 10:47 評(píng)論0 收藏0
webpack 項(xiàng)目構(gòu)建：（三）開(kāi)發(fā)環(huán)境——本地服務(wù)器搭建

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

tolerious 2019-08-22 15:10 評(píng)論0 收藏0