webpack-dev-server使用方法

webpack-dev-server使用方法

首先來回顧如下webpack的內容

首先，咱們來看看基本的webpack.config.js的寫法

const path=require('path')
//這個配置文件，其實就是一個JS文件，經過Node中的模塊操做，向外暴露了一個配置對象
module.exports={
	//在配置文件中須要手動指定入口和出口
	entry:path.join(__dirname,'./src/main.js'),//入口，表示要使用webpack打包哪一個文件
	output:{
		path:path.join(__dirname,'./dist'),//指定打包好的文件，輸出到哪一個目錄中去
		filename:'bundle.js' //這是指定 輸出的文件的名稱
	}
}

配置文件提供一個入口和一個出口，webpack根據這個來進行js的打包和編譯工做。雖然webpack提供了webpack –watch的命令來動態監聽文件的改變並實時打包，輸出新bundle.js文件，這樣文件多了以後打包速度會很慢，此外這樣的打包的方式不能作到hot replace，即每次webpack編譯以後，你還須要手動刷新瀏覽器。

webpack-dev-server其中部分功能就能克服上面的2個問題。

原始文件做出改動後，webpack-dev-server會實時的編譯，可是最後的編譯的文件並無輸出到目標文件夾，即上面配置的:

output:{
		path:path.join(__dirname,'./dist'),//指定打包好的文件，輸出到哪一個目錄中去
		filename:'bundle.js' //這是指定 輸出的文件的名稱
	}

注意：你啓動webpack-dev-server後，你在目標文件夾中是看不到編譯後的文件的,實時編譯後的文件都保存到了內存當中。所以不少同窗使用webpack-dev-server進行開發的時候都看不到編譯後的文件

1、安裝webpack_dev_server

webpack_dev_server的做用其實就是**「熱部署」**

注意：必定要在本項目中安裝webpack才行（不加-g，在項目根目錄出現node_modules文件夾，內含webpack及其依賴包）

npm install webpack

在本地項目中安裝完webpack後，再在終端中進入項目目錄下，敲下

npm install webpack-dev-server --save-dev

回車來安裝webpack_dev_server,

以後再啓動webpack_dev_server

.\node_modules\.bin\webpack-dev-server

或者是npm run dev命令也行，爲了不出現webpack和webpack-dev-server之間的版本兼容性問題，這裏舉例按下圖配置版本是沒有問題的

命令行執行成功了

到此webpack_dev_server熱部署已經啓動了，部署的服務器地址在localhost:8080/上，項目也就部署到該地址上了

以本例來講：main.js作如下修改，而後ctrl+s保存，會看到cmd控制檯會再次編譯成功，截圖見下面第2張圖

而後咱們再次訪問src下的index.html發現顏色仍是red，沒有變成blue。繼續看下面是如何解決此問題！

咱們再去看index.html文件，發現引入的js文件是本項目的dist/bundle.js是磁盤上確確實實存在的文件，而咱們webpack_dev_server的幫咱們從新打包生成的bundle.js文件並無存放到實際的物理磁盤上（由於是從新編譯打包，因此是覆蓋原文件bundle.js）；而是直接存放在電腦的內存中，因此咱們這裏的問題很簡單解決，直接把src="…/dist/bundle.js"改爲src="/bundle.js"便可，src="/bundle.js"中的bundle.js不是從本項目導入的，而是從電腦內存導入的(解釋：由於是webpack_dev_server部署服務器(使用內存空間)地址在localhost:8080,因此能夠直接使用"/"來訪問，因此「/bundle.js」是從內存導入的)，

修改爲src="/bundle.js"以後，就沒有問題了，每次咱們修改main.js裏的代碼，只須要ctrl+s保存，而後webpack_dev_server自動編譯（熱部署），瀏覽器端就會即時展現新的應用效果

2、webpack_dev_server的經常使用命令參數

咱們能夠自定義設置webpack_dev_server啓動的一些參數，而不採用它默認的

第一種配置方式：

下面的–hot參數是「熱加載」的意思，就是說咱們每次修改要編譯的源文件（對修改css文件能夠，可是對js文件好像不行）而後ctrl+s保存後，瀏覽器不從新刷新，而是直接異步加載

第二種配置方式：

把原來在package.json中dev:後面的參數部分給刪掉，只留下「webpack-dev-server」部分

再修改webpack.config.js，添加deServer:屬性和plugins屬性，按下圖配置，同時要在webpack.config.js開頭添加const webpack=require(‘webpack’)便可

3、html-webpack-plugin的兩個基本做用

由於咱們的index.html是存放在磁盤上的，咱們若是想把index.html頁面也存放到內存中（也用webpack-dev-server部署）去該怎麼辦呢？這個時候就須要用到html-webpack-plugin插件了

在plugins屬性中寫new htmlWebpackPlugin()對象，而後指定原文件，和要在內存中生成的目標頁面的名字便可，這樣OK了

4、loader—配置處理css樣式表的第三方loader

若是咱們直接在main.js裏面引入css文件而後用webpack-dev-server打包部署的話，會報錯，因此咱們須要解決這個問題、 注意：webpack默認只能打包處理 JS類型的文件，沒法處理其餘的非JS類型的文件

解決問題，

第一步： 先在項目的cmd控制檯下執行

npm i style-loader css-loader -D

來安裝css加載器

具體思路見下圖：

第二步: 在webpack.config.js裏面新增一個module節點，而後進行下圖配置

到此爲止通過配置之後，webpack-dev-server就能夠對css文件打包部署了

總結： webpack處理第三方文件類型的過程

1.發現這個要處理的文件不是JS文件，而後就去配置文件中，查找有沒有對應的第三方loader規則

2.若是可以找到對應的規則，就會調用對應的loader處理這種文件類型

3.在調用loader的時候，是從後往前調用的，好比本例中就是先調用css-loader，再調用style-loader

4.當最後的一個loader調用完畢，會把處理的結果直接交給webpack進行打包合併，最終輸出到bundle.js中去

5、loader—配置處理less樣式表的第三方loader

好比再main.js中引入less文件以下，webpack確定不能直接對此編譯和打包部署，因此須要咱們在本地項目中安裝less-loader，

在項目的cmd控制檯中輸入npm i less-loader -D安裝less-loader

而後再在項目的cmd控制檯中輸入npm i less -D安裝less

而後再在webpack.config.js中的module裏配置以.less爲結尾的文件的規則，loader的執行規則是從右到左，因此下面配置寫的是最右邊是less-loader,而後處理完交給css-loader，再而後把處理結果交給style-loader，最後把最終結果交給webpack打包部署。 能夠看到loader配置是從右到左的

6、loader—配置處理sass樣式表的第三方loader

跟上面同樣的套路作法，若是再main.js中引入.scss文件

解決方法：

①在項目的cmd控制檯中輸入npm i sass-loader -D安裝sass-loader

②而後再輸入npm i node-sass -D安裝node-sass

③而後在webpack.config.js中的module裏配置以.scss爲結尾的文件的規則便可