場景：前面一篇主要是webpack打包處理js檔案的，在一個專案中還有樣式less轉css,es6轉es5,jpg轉成瀏覽器識別的，.vue轉成js檔案。

實際：webpack本身不能做上面的事情。

解決：需要擴充套件webpack，使用loader

瀏覽器找html中的main.js,main.js中有依賴其他的js檔案。所以main.js是一個入口，如果需要瀏覽器對其他型別檔案進行打包，都需要整合到main.js中。

一、處理css檔案

1.需要處理css檔案，那麼在main.js檔案中需要引用依賴css檔案。require('./css/normal.css')

2.安裝css-loader檔案

npm install --save-dev [email protected]

3.webpack.config.js中配置module的規則：

其中

1.css-loader只負責將css檔案進行載入
2.style-loader負責將樣式載入到DOM中
3.使用Loader時，是從右向左來讀取，先讀css-loader,在讀style-loader

二、處理less檔案

1.main.js中依賴 .less檔案

2.安裝less-loader

npm install [email protected] [email protected] --save-dev

3.webpack.config.js中配置module的規則：

三、圖片配置

1.圖片不需要在main.js中依賴。但是需要在css中使用

2.安裝圖片載入器，使用url-loader，用於處理最大限制以內的圖片

npm install [email protected] --save-dev

3.安裝圖片載入器，使用file-loader，用於處理最大限制以上的圖片

npm install [email protected]  --save-dev

4.webpack.config.js中配置module的規則：

5.當圖片大小大於limit時，需要打包圖片檔案

此要配置圖片檔案打包的目錄，我們一般放在 /dist/img/下，需要在webpack.config.js中配置圖片目錄

6.還需要配置檔名稱
img/是希望圖片放在img中統一儲存
name表示原檔名稱。
hash8,指取hash8位
ext:為圖片副檔名稱

四、es6語法處理

如果沒有處理es6會導致很舊的瀏覽器無法渲染es6的程式碼

1.安裝loader

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

2.配置webpack.config.js

本文來自部落格園，作者：kaer_invoker，轉載請註明原文連結：https://www.cnblogs.com/invoker2021/p/14973811.html