打包工具webpack和熱加載深刻學習

本次小編呢，爲你們帶來一篇深刻了解打包工具 webpack。

咱們今天使用的是 webpack3.8.1版本的，咱們學習使用 3.8.1更穩定些，並學習本身如何配置文件，最新版本不須要本身配置文件，但咱們須要知道配置文件的原理

最新版本的webpack已經更新到 4.32.2版本了

 

首先介紹如下什麼是 webpack：

　　webpack它是一個前端資源加載或打包工具。資源(如：img css js json等)

1.首先第一步就是配置 配置模板說明文件 package.json

 

2.第二步就是下載webpack

　　全局下載：npm install -g webpack@3.8.1

　　局部下載：npm install webpack@3.8.1 --save -dev

不加-g 就是局部安裝

注意：儘可能全局和局部都安裝，由於下載以後先找局部安裝，局部找不到纔去找全局，使用爲了方便起見最好都安裝，安裝好後全局安裝在c盤裏，局部安裝在當前目錄下有一個node_modules文件。若是全局安裝不用帶 --save -dev局部安裝須要帶。

3.第三步

　　1.打包js文件

　　指令 webpack 入口文件 出口文件

　　能夠看到報錯，這時候就須要咱們去打包了

　　

　　

 

　　咱們每次改變js裏的內容都須要打包webpack 入口文件和出口文件很是麻煩，若是咱們只想使用 webpack這個指令，就須要提早打包，須要配置 webpack.config.js

　　webpack 會有一個默認配置文件叫webpack.config.js

 

 　　能夠看到咱們能夠成功打包文件了，若是咱們只想輸出 webpack 這個指令就能夠打包文件，就須要配置文件，如今咱們開始配置文件。

Entry：用於指定打包的文件

Output：用於指定打包後的文件

Build/build.js表示將app文件夾中的index.js 打包到build文件夾中的build.js中。

　　爲何我僅僅使用 webpack指令就能夠打包呢？

　　若是不配置webkit輸出webkit就會報錯：說沒有配置文件，找不到。配置文件名必須命名爲 webpack.config.js 在這個項目的文件夾下。若是你想使用webpack，webpack就會默認去找一個webpack.config.js的配置文件，經過這個配置文件進行轉換

　　

　　__dirname 是onde的一個全局變量，獲取當前文件所在目錄完整目錄名

能夠看到這樣就可使用了

module.exports={//暴露文件
	entry:"./index.js",//被打包文件，當前目錄
	output:{			//打包後文件的出口路徑，打包完放在那裏
		path:__dirname+"/mod2",			//路徑,把打包後的文件放在mod2目錄下面,__dirname當前目錄
		filename:"bundle.js"			//文件名
	},			

}

　　

　　2.打包css文件

　　

　　咱們下一彙總就執行css樣式就打包變成粉色，若是之間打包會報錯，須要下載依賴包。

　　loader：依賴包

　　css轉成js 

　　less轉成js

　　json轉成js

　　img轉成js

這種轉最後都放在js文件裏，就須要依賴包 loader就解決這些問題

　　css文件打包到js中 須要css-loader  style-loader

　　首先下載css

　　npm install style-loader css-loader --save -dev

 

　　

 

 

module.exports={//暴露文件
	entry:"./index.js",//被打包文件，當前目錄
	output:{			//打包後文件的出口路徑，打包完放在那裏
		path:__dirname+"/mod2",			//路徑,把打包後的文件放在mod2目錄下面,__dirname當前目錄
		filename:"./bundle.js"			//文件名
	},			
	module:{				//須要依賴的模塊(包)
		loaders:[			//依賴的包
			{
				test:/\.css$/,//凡是以css結尾的文件 都使用useloader
				loader:"style-loader!css-loader"
				//順序不能寫反
			}
		]			
		
	}
}

配置完指令後 指令就是簡單的 webpack　　

 　　第三步每改一次js文件，就打包一下 webpack

　　添加熱加載 改完一個文件保存後 打包就會自動刷新

　　

Webpack-dev-server是一個輕量級的服務器，修改文件源碼後，自動刷新頁面將修改同步頁面上。

 

　　須要全局安裝：

　　全局安裝：npm install -g webpack-dev-sever@2.9.4 

　　局部安裝：npm install --save-dev webpack-dev-server@2.9.4

 　　

 

 在css修改顏色保存後就會自動更新了，注意必定在8080端口打開

　　直接使用 webpack-dev-server 啓動就行

　　可是這種啓動只是啓動服務器，可是不能自動刷新

　　另外一種啓動 webpack-dev-server --hot -inline

　　既能夠啓動服務器也可讓瀏覽器自動刷新

　　配置啓動指令 默認啓動指令是：webpack-dev-server --hot -inline

　　啓動一個簡單的：直接在package.json裏面配置啓動項，如vue等框架都是這樣啓動的。

 　　這個就是在服務器生成的虛擬文件 bundle.js，這是由出口文件決定的，由你決定。可是和index.html 是同目錄同級別

　　

 　　此時沒有把這個 bundle.js生成是虛擬的，正常路徑應該是以相對路徑引入開發時是以虛擬文件開發，開發完後纔打包而後以相對來說引入。

引入關係須要注意

　

做者：晉飛翔

手機號(微信同步)：17812718961　歡迎你們一塊兒探索web前端