P11.6-webpack配置less-loader

1.概述

在上一篇介紹瞭如何安裝配置loader，只要是我們需要的擴充套件功能都可以在webpack官網中找到對應的外掛，然後安裝就可以使用它的功能非常的方便。這篇再介紹下使用less-loader外掛安裝配置，通過這篇案例以後我們就可以複製它的步驟，舉一反三安裝更多的外掛。

2.建立less專案

2.1.建立專案

建立專案這裡不再重複介紹，只需要按照上篇《P11.5-webpack配置css-loader》步驟全部執行一遍就可以了。

1. P11.5-webpack配置css-loader地址: P11.5-webpack配置css-loader

2. 專案完整結構
   

2.2.配置專案

1. 新增less格式檔案
   在src的css資料夾中新增normal.less檔案，內容如下。

body {
  background-color: red;
}

2. main.js引入normal.less

// 1.使用commonjs的模組化規範匯入模組
const {add, mul} = require('./js/mathUtils');
console.log(add(10, 20));
console.log(mul(10, 20));

// 2.使用ES6的模組化的規範匯入模組
import {name, age, height} from "./js/info";
console.log(name);
console.log(age);
console.log(height);

// 匯入css檔案
require('./css/normal.css');

//----------下面都是lsee專案新增的內容----------
// 匯入less檔案
require('./css/special.less');
// 向index.html中寫入內容測試less是否生效
document.writeln('<h2>你好啊,less!</h2>')

3.安裝配置less-loader

webpack的loader使用有兩個步驟：

• 下載對應的loader
• webpack.config.js配置安裝的loader

3.1.安裝less-loader

1. 訪問webpack官網：https://www.webpackjs.com/loaders/less-loader/

2. 複製less-loader安裝命令進行安裝

# 進入到專案根目錄
cd /04-webpack的less-loader
#執行安裝less-loader
#因為我們上面安裝區域性webpack指定的版本較低，所以這裡安裝less-loader也要指定低版本，高版本不相容。
npm install --save-dev less-loader@4.1.0 less

3.2.配置less-loader

複製官網less-loader配置內容到我們專案的webpack.config.js中。

webpack.config.js新增less-loader內容

// 匯入path模組，這個path會自動從我們安裝node包中找到path匯出的模組
const path = require('path')

// webpack模組化預設使用的是CommonJS
module.exports = {
  // 入口：將webpack打包命令中原始檔入口路徑配置到這裡
  entry: './src/main.js',
  // 出口：將webpack打包命令中輸出檔案路徑配置到這裡
  output: {
    // ./dist改寫為絕對路徑, path.resolve()獲取絕對路徑的方法，__dirname：表示當前檔案的絕對路徑
    path: path.resolve(__dirname,'dist'),
    filename: 'bundle.js'
  },
  // 配置webpack擴充套件外掛loader
  module: {
    rules: [
      {
        // 正則匹配以css結尾的檔案
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
        // 配置less-loader
      {
        test: /\.less$/,
        use: [{
            loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        }, {
            loader: "less-loader" // compiles Less to CSS
        }]
    }
    ]
  }
}

4.構建專案

4.1.構建專案

# 進入到專案根目錄
cd /04-webpack的less-loader
# npm構建專案
npm run build

#構建後的效果
Hash: cfe00ec60ec1e91e1faf
Version: webpack 3.6.0
Time: 622ms
    Asset     Size  Chunks             Chunk Names
bundle.js  22.8 kB       0  [emitted]  main
   [2] ./src/main.js 518 bytes {0} [built]
   [3] ./src/js/mathUtils.js 197 bytes {0} [built]
   [4] ./src/js/info.js 154 bytes {0} [built]
   [5] ./src/css/normal.css 1.1 kB {0} [built]
   [6] ./node_modules/css-loader/dist/cjs.js!./src/css/normal.css 181 bytes {0} [built]
   [8] ./src/css/special.less 1.23 kB {0} [built]
   [9] ./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/css/special.less 191 bytes {0} [built]      
    + 3 hidden modules

4.2.執行專案檢視效果

使用VScode開發工具執行專案的index.html檔案在瀏覽器上檢視less檔案定義的文字字號和顏色以載入出來。