文章目錄

• 打包sass檔案
• 專案結構
• 修改原始碼
• 執行結果
• 打包less檔案
• 修改原始碼
• 執行結果
• 打包url中的資源
• 修改原始碼
• 執行結果

  webpack除了能夠打包css資原始檔外，其還可以打包眾多的其它型別的檔案。

  這裡為了減少重複程式碼的編寫，所以說此處是在上一篇文章中程式碼的基礎上所做的修改，上一篇文章的地址如下：

• 利用webpack中的loader來打包css檔案

打包sass檔案

  webpack

專案結構

修改原始碼

  site1.scss檔案

  在css資料夾中新增site1.scss檔案，其原始碼如下：

$color:blue;

#v2{
    border:1px solid $color;
}

  main.js檔案

  在main.js檔案檔案中新增site1.scss資原始檔的引入。

require('../assets/css/site1.scss');
 

  webpack.config.js檔案

  在webpack.config.js檔案中的loaders關鍵字下新增下面程式碼：

,{
    test:/\.scss$/
     ,loader:'style-loader!css-loader!sass-loader'
 }

  package.json檔案

  將控制檯的游標定位於專案根目錄，在其中輸入下述指令，將其中的依賴新增到package.json檔案中。

cnpm i node-sass sass-loader css-loader style-loader --save-dev

執行結果

  在控制檯中輸入下述指令，開啟瀏覽器，即能訪問打包後的結果。

  如上圖所示，第二個文字框成功的變成了藍色，這說明我們的sass打包正確。

打包less檔案

  webpack打包less檔案所需要的依賴包為css-loader、style-loader、less-loader，其中less為less-loader所需要的依賴包。

修改原始碼

  site2.less檔案：

  在site2.less中新增如下原始碼，同時將所有文字框的邊框寬度變為2px

@color:green;

#res{
    border:2px solid @color;
}

  main.js檔案：

  在main.js中新增原始碼：

require('../assets/css/site2.less');

  webpack.config.js檔案：

  在webpack.config.js中的loaders關鍵字下新增原始碼：

,{
      test:/\.less/                    //打包.less檔案
      ,loader:'style-loader!css-loader!sass-loader!less-loader'
  }

  package.json檔案

  將控制檯的游標定位於專案根目錄下，執行下面指令將css-loader、style-loader、less-loader以及less依賴包打入到package.json檔案中。

cnpm i less less-loader style-loader css-loader --save-dev

執行結果

  在控制檯中執行下列命令：

cnpm i
webpack

  其展示結果為：

打包url中的資源

  webpack打包url網路資源所需要的依賴包為url-loader、file-loader。

修改原始碼

  site.css原始碼：

  在該檔案中新增下述程式碼，同時在相應目錄中新增圖片檔案。

#bg{
    width: 200px;
    height: 200px;
    background-image: url("../imgs/png/e6.png");
}

  index.html原始碼：

  在該檔案中新增下述程式碼：

<hr>
<div id="bg"></div>

  package.json原始碼：

  將控制檯中的游標定位於專案根目錄中，執行下述命令列指令將url-loader、file-loader新增到package.json中

npm i url-loader file-loader --save-dev

  由於依賴包版本的不一致性，這導致有的版本的依賴包不能夠正常執行，所以在這裡更新一下完整原始碼：

{
  "name": "csspackage",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^1.0.1",
    "file-loader": "^0.11.1",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^0.5.8"
  }
}

  webpack.config.js原始碼：

  在該檔案的loaders關鍵字下新增下述程式碼：

,{
     test:/\.(png|jpg|gif|ttf)$/           //打包url請求的資原始檔
     ,loader:'url-loader?limit=20000'     //limit表示圖片的大小為40k是臨界值，小於20k的圖片均被
     // 打包到build.js中去，此時圖片的顯示就會很快，這是一個優化操作。
 }

執行結果

  由上圖可知，我們打包的url圖片資源已經可以正常顯示了，由於該圖片資源小於20k，因而其圖片資源被以base64位位元組碼的形式打到了build.js中，其可以加快圖片在頁面的展示速度。