1. 通過loader打包非js模塊

1.1. 在實際開發中, webpack默認只能打包處理以.js后綴名結尾的模塊, 其它非.js后綴名結尾的模塊, webpack默認處理不了, 需要調用loader加載器才可以正常打包, 否則會報錯。

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

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

1.3. loader的調用過程

2. 打包處理css文件

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

?

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

2.3. 其中, test表示匹配的文件類型, use表示對應要調用的loader。

2.4. use數組中指定的loader順序是固定的, 多個loader的調用順序是從后往前調用。

2.5. 在src目錄下新建css目錄, 在該目錄下創建index.css

?2.6. 在index.js中導入index.css

2.7. 重新打包運行項目?

3. 打包處理less文件

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

?

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

3.3. 在src目錄下新建css目錄, 在該目錄下創建index.less?

3.4. 在index.js中導入index.less?

3.5. 重新打包運行項目?

4. 打包處理scss文件

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

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

4.3. 在src目錄下新建css目錄, 在該目錄下創建index.scss?

4.4. 在index.js中導入index.scss?

4.5. 重新打包運行項目?

5. webpack5打包出的js在IE11, IE10中報錯

5.1. 使用webpack5默認打包出來的js文件在IE11, IE10中報錯SCRIPT1002: 語法錯誤main.js (9,14)。原因和babel設置無關, webpack5中默認打包出來的js文件會用ES6語法中的箭頭函數, 故在IE11和IE10中引用后會報錯。

?

5.2. 在webpack.config.js中配置output.environment, 告訴webpack在生成的運行時代碼中可以使用哪個版本的ES特性。?

5.3. 在webpack.config.js中配置target, 告知webpack為目標(target)指定一個環境。?

5.4. 配置以上任意一個選項后, IE11, IE10不再報錯。生成的main.js中的箭頭函數變成如下:?

6. 配置postcss自動添加css的兼容前綴(瀏覽器內核標識)

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

?

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

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

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

6.5. 使用偽元素選擇器給輸入框提示文字添加顏色, 該選擇器瀏覽器不兼容, 需要添加瀏覽器內核標識?

6.6. 重新打包, 運行項目, chrome瀏覽器?

6.7. IE11瀏覽器?

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

7.1. 安裝babel轉換器相關的包: npm install babel-loader @babel/core @babel/runtime -D

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

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

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

7.5. 在index.js中使用類?

7.6. 重新打包, 運行項目, IE11瀏覽器?

8. 打包樣式表中的圖片

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

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

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

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

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

8.6. 打包運行?

9. Vue單文件組件

9.1. Vue單文件組件的組成結構

9.1.1.?template組件的模板區域

9.1.2.?script業務邏輯區域

9.1.3.?style樣式區域

9.1.3.?在src目錄下創建components目錄, 然后在該目錄下創建app.vue

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

9.2.1.?在終端運行: npm install vue-loader vue-template-compiler -D命令, 添加相關loader

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

9.3. 在webpack項目中使用vue

9.3.1.?在終端運行: npm install vue -S命令安裝vue

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

9.3.3.?創建vue實例, 指定渲染區域進行渲染?

?

9.4. 打包運行?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。