webpack4.x深刻與實踐

1、什麼是webpackcss

是一個前端資源加載/打包工具。它將根據模塊的依賴關係進行靜態分析,而後將這些模塊按照指定的規則生成對應的靜態資源。它作的事情是,分析你的項目結構,找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言(Scss,TypeScript等),並將其轉換和打包爲合適的格式供瀏覽器使用。能夠將多種靜態資源 js、css、less 轉換成一個靜態文件,減小了頁面的請求。html

2、安裝和命令行前端

一、新建一個目錄,進入目錄,初始化
圖片描述webpack

二、安裝es6

全局安裝web

clipboard.png
在輸出版本時,顯示,要安裝webpack-clijson

clipboard.png

clipboard.png
這樣就能輸出版本,能夠看到我安裝的是4.2.0,這裏要注意,自webpack4以後,使用有很大的變化segmentfault

clipboard.png
局部安裝瀏覽器

clipboard.png
(1)練習(坑):處理js文件,在項目根目錄下,新建hello.js,而後打包sass

clipboard.png
顯示沒有配置webpack的mode選項,默認有production和development兩種,咱們輸入

clipboard.png
依然有錯:未找到入口模塊發成錯誤,

這是由於webpack4.x是以項目根目錄下的./src/index.js做爲入口,因此咱們要新建src目錄且改hello.js爲index.js

這裏還要注意:

webpack4.x的打包已經不能用webpack 文件a 文件b的方式,而是直接運行webpack --mode development或者webpack --mode production,這樣便會默認進行打包,入口文件是'./src/index.js',輸出路徑是'./dist/main.js',其中src目錄即index.js文件須要手動建立,而dist目錄及main.js會自動生成。

所以咱們再也不按webpack 文件a 文件b的方式運行webpack指令,而是直接運行

clipboard.png

這樣便能實現打包。

每次這樣寫是否是都點麻煩,咱們能夠在package.json中

clipboard.png

每次執行就能夠:

clipboard.png
(2)練習:處理css文件

新建一個css文件style.css,在index.js中引入

clipboard.png
而後打包:

clipboard.png
會報如上錯誤,是由於webpack不支持css文件類型,須要依賴loader

clipboard.png
css-loader:使webpack能夠處理css文件

style-loader:新建一個style標籤,把css-loader處理過的文件放進去,而後插入到HTML標籤中

安裝以後使用(直接在文件前):

clipboard.png
或者(在命令行):

clipboard.png
那每次更新都要執行一次,有沒有自動更新的???

clipboard.png
(3)其餘參數:

clipboard.png
--progerss:會出現打包過程,有百分比進度條

--display-modules:會把全部打包的模塊列出來

--display-reasons:會把打包的緣由列出來

3、webpack的配置

(1)新建一個項目並初始化

clipboard.png
上面:將會打包。。。main.js文件到。。。bundle.js文件

多文件輸入:

clipboard.png
4、自動生成HTML頁面文件

(1)安裝html-webpack-plugin插件

clipboard.png
(2)在webpack配置package.config.js中

clipboard.png
(3)傳參使用

一、參數

clipboard.png
在根目錄下的index.html中

clipboard.png
生成的dist/index.html中

clipboard.png
二、上線地址

clipboard.png
在生成的index.html中

clipboard.png
三、html壓縮

clipboard.png
四、多頁面應用,生成多個html文件

clipboard.png
5、loader的配置

一、解析es6語法

(1)安裝babel

clipboard.png
(2)配置webpack

clipboard.png
二、解析css

(1)安裝style-loader和css-loader

clipboard.png
(2)配置webpack

clipboard.png
(3)在項目中常常有相似-webkit的前綴,每次寫很麻煩,這裏就要用到postcss-loader,後處理loader

clipboard.png
配置webpack

clipboard.png
新建一個postcss.config.js文件和webpack.config.js同級

clipboard.png
此時,若是你打包,並不會報錯,可是前綴可能也沒有,因此須要在package.json中加入

clipboard.png
三、解析less

(1)安裝

clipboard.png
(2)webpack的配置

clipboard.png
四、解析sass
sass的使用和less同樣,只要把less改成sass就好了

五、處理html模板文件

(1)安裝html-loader

clipboard.png
(2)配置

clipboard.png
(3)使用

layer.js

clipboard.png
app.js

clipboard.png
六、使用ejs模板文件,後綴爲tpl或ejs

(1)安裝

clipboard.png
(2)配置

clipboard.png
(3)使用

layer.tpl

clipboard.png

layer.js

clipboard.png
app.js

clipboard.png
七、用file-loader處理圖片

(1)安裝
clipboard.png
(2)配置
clipboard.png
(3)使用

layer.less

clipboard.png
如果在.tpl或.ejs中使用

clipboard.png
(4)也能夠加參數

clipboard.png
八、使用url-loader處理圖片(會影響文件大小)

clipboard.png

clipboard.png
九、經過image-webpack-loader和url-loader結合:先有image-webpack-loader打包,在經過url-loader

clipboard.png

clipboard.png

相關文章
相關標籤/搜索