一、安装

其实中文官网已经讲的很清楚了

1. 使用 npm 命令 安装
2. 配置 webpack.config.js即可
   官网直达：less-loader

我这里的操作步骤是：

1. 先安装 less-loader
   使用到的命令是： npm install --save-dev less-loader@4.1.0 less@3.9.0

• –save-dev 开发依赖（辅助）
• @后边是版本号

npm install 在安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件
一个是

 --save || -S // 运行依赖（发布）

另一个是

–save-dev || -D //开发依赖（辅助）

区别是它们会把依赖包添加到package.json 文件

–save ： dependencies 键下，发布后还需要依赖的模块，譬如像jQuery库或者Angular框架类似的，我们在开发完后后肯定还要依赖它们，否则就运行不了。

–save-dev ： devDependencies 键下，开发时的依赖比如安装 js的压缩包gulp-uglify 因为我们在发布后用不到它，而只是在我们开发才用到它。

二、添加相应的依赖和 .less文件

首先我们在 main.js 文件添加如下依赖：

// 依赖less文件
require("./css/special.less")

然后在css文件夹下创建如下less文件:

在该文件下添加如下代码：

@fontsize:50px;
@fontcolor:teal;body{font-size: @fontsize;color: @fontcolor;
}

三、配置webpack.config.js

我这里的配置如下：

const path = require("path")module.exports = {entry: "./src/main.js",//入口output: {// __dirname 当前文件的路径path: path.resolve(__dirname, "dist"),//需要动态的获取绝对路径filename: "bundle.js"//打包的文件名},//出口module: {rules: [{test: /\.css$/,// css-loader 只负责将css文件进行加载// style.loader 负责将样式添加到DOM中// 使用多个loader时，是从又向左读取的。use: ['style-loader', 'css-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}]}]}
}

注意顺序：因为 webpack的数组是从后往前读取的，所以顺序看起来稍微有点怪。

这里放一下我的文件目录：

四、打包

使用到的命令是：npm run build 因为之前已经配置过了scripts脚本 所以可以使用该命令

如果你没有进行配置的话，你需要使用的命令是：webpack ./src/main.js ./dist/bundle.js

如果你想和我达到同样的效果的话,你或许可以看看我的前一篇文章：
初识webpack 的第六点webpack.config.js配置 和 package.json配置

效果：