1. 通過loader打包非js模塊

1.1. 在實(shí)際開發(fā)中, webpack默認(rèn)只能打包處理以.js后綴名結(jié)尾的模塊, 其它非.js后綴名結(jié)尾的模塊, webpack默認(rèn)處理不了, 需要調(diào)用loader加載器才可以正常打包, 否則會(huì)報(bào)錯(cuò)。

1.2. loader加載器可以協(xié)助webpack打包處理特定的文件模塊, 比如:

• less-loader可以打包處理.less相關(guān)的文件
• sass-loader可以打包處理.scss相關(guān)的文件
• url-loader可以打包處理css中與url路徑相關(guān)的文件

1.3. loader的調(diào)用過程

2. 打包處理css文件

2.1. 在終端運(yùn)行: npm install style-loader css-loader -D命令, 安裝處理css文件的loader。

?

2.2. 在webpack.config.js的module——>rules數(shù)組中, 添加loader規(guī)則如下:?

2.3. 其中, test表示匹配的文件類型, use表示對應(yīng)要調(diào)用的loader。

2.4. use數(shù)組中指定的loader順序是固定的, 多個(gè)loader的調(diào)用順序是從后往前調(diào)用。

2.5. 在src目錄下新建css目錄, 在該目錄下創(chuàng)建index.css

?2.6. 在index.js中導(dǎo)入index.css

2.7. 重新打包運(yùn)行項(xiàng)目?

3. 打包處理less文件

3.1. 在終端運(yùn)行: npm install less-loader less -D命令, 安裝處理less文件的loader。

?

3.2. 在webpack.config.js的module——>rules數(shù)組中, 添加loader規(guī)則如下:?

3.3. 在src目錄下新建css目錄, 在該目錄下創(chuàng)建index.less?

3.4. 在index.js中導(dǎo)入index.less?

3.5. 重新打包運(yùn)行項(xiàng)目?

4. 打包處理scss文件

4.1. 在終端運(yùn)行: npm install sass-loader node-sass -D命令, 安裝處理scss文件的loader。

4.2. 在webpack.config.js的module——>rules數(shù)組中, 添加loader規(guī)則如下:?

4.3. 在src目錄下新建css目錄, 在該目錄下創(chuàng)建index.scss?

4.4. 在index.js中導(dǎo)入index.scss?

4.5. 重新打包運(yùn)行項(xiàng)目?

5. webpack5打包出的js在IE11, IE10中報(bào)錯(cuò)

5.1. 使用webpack5默認(rèn)打包出來的js文件在IE11, IE10中報(bào)錯(cuò)SCRIPT1002: 語法錯(cuò)誤main.js (9,14)。原因和babel設(shè)置無關(guān), webpack5中默認(rèn)打包出來的js文件會(huì)用ES6語法中的箭頭函數(shù), 故在IE11和IE10中引用后會(huì)報(bào)錯(cuò)。

?

5.2. 在webpack.config.js中配置output.environment, 告訴webpack在生成的運(yùn)行時(shí)代碼中可以使用哪個(gè)版本的ES特性。?

5.3. 在webpack.config.js中配置target, 告知webpack為目標(biāo)(target)指定一個(gè)環(huán)境。?

5.4. 配置以上任意一個(gè)選項(xiàng)后, IE11, IE10不再報(bào)錯(cuò)。生成的main.js中的箭頭函數(shù)變成如下:?

6. 配置postcss自動(dòng)添加css的兼容前綴(瀏覽器內(nèi)核標(biāo)識(shí))

6.1. 在終端運(yùn)行: npm install postcss-loader autoprefixer -D命令, 安裝loader。

?

6.2. 在webpack.config.js的module——>rules數(shù)組中, 添加loader規(guī)則如下:?

6.3. 在項(xiàng)目根目錄中, 創(chuàng)建postcss配置文件postcss.config.js并初始化基本配置如下:?

6.4. 在index.html中添加輸入框, 使用placeholder屬性?

6.5. 使用偽元素選擇器給輸入框提示文字添加顏色, 該選擇器瀏覽器不兼容, 需要添加瀏覽器內(nèi)核標(biāo)識(shí)?

6.6. 重新打包, 運(yùn)行項(xiàng)目, chrome瀏覽器?

6.7. IE11瀏覽器?

7. 打包處理js文件中的高級語法

7.1. 安裝babel轉(zhuǎn)換器相關(guān)的包: npm install babel-loader @babel/core @babel/runtime -D

7.2. 安裝babel語法插件相關(guān)的包: npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D?

7.3. 在項(xiàng)目根目錄中, 創(chuàng)建babel配置文件babel.config.js并初始化基本配置如下:?

7.4. 在webpack.config.js的module——>rules數(shù)組中, 添加loader規(guī)則, exclude為排除項(xiàng), 表示babel-loader不需要處理node_modules中的js文件。?

7.5. 在index.js中使用類?

7.6. 重新打包, 運(yùn)行項(xiàng)目, IE11瀏覽器?

8. 打包樣式表中的圖片

8.1. 使用webpack5的Asset Modules，可以輕松的將圖片打入我們的系統(tǒng)中，配置webpack.config.js。

?8.2. 在index.html中添加div, id為bg

8.3. 在src目錄下添加images目錄, 存放兩張圖片?

8.4. 在index.css中使用背景圖片?

8.5. 在index.html中直接使用圖片?

8.6. 打包運(yùn)行?

9. Vue單文件組件

9.1. Vue單文件組件的組成結(jié)構(gòu)

9.1.1.?template組件的模板區(qū)域

9.1.2.?script業(yè)務(wù)邏輯區(qū)域

9.1.3.?style樣式區(qū)域

9.1.3.?在src目錄下創(chuàng)建components目錄, 然后在該目錄下創(chuàng)建app.vue

9.2. webpack中配置vue組件的加載器

9.2.1.?在終端運(yùn)行: npm install vue-loader vue-template-compiler -D命令, 添加相關(guān)loader

9.2.2.?在webpack.config.js配置文件中, 添加vue-loader和插件??

9.3. 在webpack項(xiàng)目中使用vue

9.3.1.?在終端運(yùn)行: npm install vue -S命令安裝vue

9.3.2.?在index.html中添加vue控制的頁面區(qū)域?

9.3.3.?創(chuàng)建vue實(shí)例, 指定渲染區(qū)域進(jìn)行渲染?

?

9.4. 打包運(yùn)行?

總結(jié)

以上是生活随笔為你收集整理的034_webpack中的加载器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。