js-工具嘗試篇-webpack-dev-server

waltr 發布于2019-08-20 14:12 / 650人閱讀

摘要：以前看或者做開發的時候，常常看到。看介紹是一個基于框架的小服務，通過來處理這個打包機小查了一下，的作用是把打包成中間件。原理大致清楚了，還可以根據需求選不同的模式事不宜遲，趕緊試試吧。那么是如何引進來的呢所以說，是生成在內存中的。

以前看demo或者做開發的時候，常常看到webpack-dev-server。
這邊敲代碼，同時刷新瀏覽器，真是nice!
但是自己卻沒有了解學習過它是怎一回事，直接就著用。導致現在覺得不把這個東西吃一吃，渾身不自在！

原理是什么
這么神奇的東西的原理是什么，作為小白開發者當然很好奇。
看介紹http://webpack.github.io/docs...

webpack-dev-server是一個基于express框架的nodejs小服務，通過webpack-dev-middleware來處理webpack這個打包機（小walker查了一下，webpack-dev-middleware的作用是把webpack打包成中間件）。它也有一個連接這個服務的小運行環境，經由sock.js實現（sock.js小walker查了一下，是一個js庫，可用作創建跨瀏覽器的，瀏覽器和服務器間的通信信道）。

原理大致清楚了，還可以根據需求選不同的模式？事不宜遲，趕緊試試吧。

嘗試代碼的github地址https://github.com/WalkerZyy/...
Try No.1 hello world
文件目錄：

package.json:

配置webpack.config.js：

參考著官網寫了個服務：
由于unshift進dev的那串代碼意義不明，所以先注釋了，后面再研究

dev中的main.js：

helloworld.html:

package.json中加命令

瀏覽器中看結果：

好了，成功了，但是還是有些小疑惑，下面一點點來扣

首先，參數解讀之contentBase

The webpack-dev-server will serve the files in the current directory, unless you configure a specific content base.

也就是說，服務會默認一個網站目錄，如果我不填這個參數，相當于
contentBase:"./"
瀏覽器訪問結果：

現象觀察，生成的index.js在哪里
我的helloworld.html里引入了編譯后的index.js，但是bin目錄里并沒有，任何目錄里都沒有。那么是如何引進來的呢？

所以說，是生成在內存中的。
描述中，有個publicPath，這時候我如果添加publicPath，也就是“/assets/”

取不到了
改為：

就ok了

另外如英語描述，打包是實時的，我加個新感嘆號

就看到又打包了，刷新網頁：

自動刷新
剛才沒有自動刷新的，因為沒有配
自動刷新有兩種模式Inline 和iframe
最終效果都一樣
參考http://blog.csdn.net/chengnuo...
這兩種模式，官網都有講
webpack-dev-server的啟動模式有兩種
node Api模式和cmd模式
之前注釋掉的下面這段代碼就是配置nodejs Api形式的inline模式

Hot Module Replacement
熱替換是什么
參考https://segmentfault.com/a/11...
命令行方式的做法先略去，直接看node.js Api的做法
按照官網的做法

public地址不對會有跨域報錯
熱替換原來也是要刷新頁面的嗎？
https://segmentfault.com/a/11...
https://segmentfault.com/q/10...
所以說，熱替換是給可以熱替換的模塊用的

好了，不糾結了，先寫這么多

GPU云服務器云服務器 webpack-dev-server 云服務器怎么解決你正嘗試從不屬于 js工具 js封裝工具

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

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

[譯] Webpack——令人困惑的地方

摘要：處理文件的擴展名很多的配置文件都有一個屬性，然后就像下面代碼所示有一個空字符串的值。空字符串在此是為了一些在文件時不帶文件擴展名的表達式，如或者譯者注實際就是自動添加后綴，默認是當成文件來查找路徑就這么多。原文 Webpack—The Confusing Partsissue討論 Webpack是目前基于React和Redux開發的應用的主要打包工具。我想使用Angular 2或其他...

anRui 2019-08-19 18:17 評論0 收藏0
webpack使用之基礎篇

摘要：是一個和差不多同時代的產物，但是它只支持基于，對于來說只能興嘆了。找一個自己順手的就好，順便一提，我現在主要使用輔助。說到自動化構建，你想到了什么？基于AMD的requirejs？還是基于commoJS的browserify？他們都在各自的領域或者說時代發揮了很重要的作用。但是時代的變遷，webpack成了現在的佼佼者，我們不知道什么時候wepback也會被取代，但是現在我們必須要掌...

zhichangterry 2019-08-19 18:33 評論0 收藏0
PostCSS自學筆記（一）【安裝使用篇】

摘要：而則可制定個人需求的一套解決方案僅安裝需要的插件。迫不及待的你已經等不及安裝使用了吧。安裝及使用一般是結合自動化工具使用，如果要單獨使用可以安裝，這里我先對的安裝使用講解下。接下來說點實際的，如何利用結合自動化工作在項目中使用。 PostCSS介紹 PostCSS是一個利用JS插件來對CSS進行轉換的工具，這些插件非常強大，強大到無所不能。其中，Autoprefixer就是眾多Post...

jsummer 2019-08-29 13:17 評論0 收藏0
使用webpack和babel搭建react開發環境

摘要：譯文原文來自寫在前面使用已經蠻長一段時間但是在新項目開始之際都是東拼西湊其他項目的配置來使用如果要自己從零開始寫一個完整項目的配置估計得費死勁所以在發布版本之際正是時候來認真從零開始學習了是一個出自的庫用于構建用戶交互界面是一個非常厲害的有譯文,原文來自https://scotch.io/tutorials/s...寫在前面,使用webpack已經蠻長一段時間,但是在新項目開始之際,...

AZmake 2019-08-20 15:58 評論0 收藏0
gulp和webpack入門介紹

摘要：介紹說明的包管理器，用于插件管理包括安裝卸載管理依賴等使用安裝插件命令提示符執行插件名稱。總結安裝新建文件全局和本地安裝安裝插件新建文件通過命令提示符運行任務。 showImg(https://segmentfault.com/img/remote/1460000010873466); 前言眾所周知目前比較火的工具就是gulp和webpack，但webpack和gulp卻有所不同，本...

hsluoyz 2019-08-20 18:58 評論0 收藏0