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;
}

  

 

  
1
  
2
  
3
 

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>')

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
 

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

  

 

  
1
  
2
  
3
  
4
  
5
 

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
        }]
    }
    ]
  }
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
 

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
 

4.2.运行项目查看效果

使用VScode开发工具运行项目的index.html文件在浏览器上查看less文件定义的文字字号和颜色以加载出来。

文章来源: brucelong.blog.csdn.net，作者：Bruce小鬼，版权归原作者所有，如需转载，请联系作者。

原文链接：brucelong.blog.csdn.net/article/details/111227178