打包##使用webpack進行工程化開發(fā)
1．需要在本地先全局安裝webpack工具 window+R
cmdnpm install webpack@4 -g
npm install webpack-cli@3 -g
刪除 npm remove webpack -g
查看版本? webpack -v
2．在當前項目終端中安裝webpack
--在當前項目里面初始化一個包的描述文件
npm init -y
--再安裝webpack和webpack-cli
npm install webpack@4 -D
npm install webpack-cli@3 -D
loader
loader:加載器肃拜，用來識別各種文件栗涂。
webpack默認只能處理js文件和json文件掉冶，如果要處理其他文件的話玷坠，需要引入對應的加載器。
識別css文件要兩個加載器分別是：
https://www.webpackjs.com/loaders/css-loader/
https://www.webpackjs.com/loaders/style-loader/
這兩個加載器是處理樣式文件的乘寒，style-loader與css-loader必須結合使用
這時候得安裝：
首先安裝
npm install css-loader@3.4.2 -D
npm install style-loader@1.1.3 -D
在終端可以一起安裝：npm install css-loader@3.4.2 npm install style-loader@1.1.3-D
plugins插件
plugins可以自動幫我們創(chuàng)建html文件
這需要安裝npm install html-webpack-plugin@3.2.0 -D
這個插件和loader不太一樣
loader安裝好直接使用
這個插件需要引入
第一步先安裝好如圖
然后引入plugins插件
也可以指定一個html文件烹骨，作為頁面模板被創(chuàng)建。
先創(chuàng)建上圖public文件夾
然后在插件中指定html文件夾作為模板
如下圖：
這樣的好處是不需要我們自己創(chuàng)建html文件
file-loader
處理圖片格式的文件
先安裝
npm install file-loader@5.0.2 -D
url-loader
也是用來處理圖片的
他可以限制圖片的大小
終端安裝
npm install url-loader@3.0.0 -D
把圖片打包給index.html里
大圖片要整體打包過去畴蒲，小圖片沒有必要整體導入
如果你的圖片通過src引入，每張圖片都要去發(fā)請求返回的对室，
小圖片沒有必要發(fā)請求模燥，把小圖片壓縮成base64編碼
沒有必要把所有圖片參與打包
有些小圖片可以把圖片文件本身轉成base64編碼，以后大圖片發(fā)送請求掩宜，小圖片嵌在標簽里面就行了
這時候用下面圖片的方法就不行了
需要換url-loader
url-loader可以限制圖片的大小
