webpack处理less文件

注意：本进阶是webpack进阶【6】的基础上进行衍生。

一、下载less-loader

• 1. 下载less-loader的同时我们 也需要下载 less。

cnpm i less less-loader -D

二、新建 less 文件

• 1. 在 src 文件夹下面新建 less 文件夹， 在 less文件夹下新建立 【header.less】。如下图：

     
     image.png

• 2. 在 header.less 中写入如下内容

     
     image.png

三、 main.js 中引入 less

四、webpack.config.js中配置 less-loader

• 1. 在module中写入如下内容

{
   test: /\.less$/,
   // 经过css-loader解析后，把打包后的 css 从 打包后的 js中 分离出来。这个操作可以看下webapck进阶【6】：分离出 css 文件
   use: [
      {
         loader: MiniCssExtractPlugin.loader,
         options: {
              publicPath: '../'
         }
      },
      // css-loader这个也需要写，不能不写，less经过解析后再用css-loader进行解析
      'css-loader',
      'less-loader'
   ]
}

• 2. webpack.config.js 中完整代码如下

const path = require('path');                                       // 引入path模块
const HtmlWebpackPlugin = require('html-webpack-plugin');           // 引入自动生成 html 的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')    // 引入分享 css 的插件
// 配置webpack的配置文件，需要将配置的对象导出，给webpack使用
module.exports = {
    // 1. 打包入口，从哪个文件开始打包
    entry: './src/main.js',

    // 2. 打包的文件放在哪
    output:{
        // 打包的文件输出的目录（输出的目录必须是一个绝对路径），这里也可以写成path:path.join(_dirname, 'dist')
        path: path.join(__dirname, './dist'),
        // 打包后的文件名叫什么
        filename: 'bundle.js'
    },
    // 3. 打包的模式： production 生产模式（打包后的文件或压缩） development(开发模式，不压缩)
    mode: 'development',

    // 4. 配置module模块加载规则
    // 默认，webpack只认识JSON,javascript，不认识其他文件，如果希望打包处理其他文件，需要配置对应的loader
    module: {
        rules: [
            {
                // 正则： 匹配所有以 .css 结尾的文件
                test: /\.css$/,
                // 实际处理顺序：从右往左
                // css-loader: 让webpack能够识别解析 .css 文件
                // style-loader: 通过动态的创建 style 标签的方式（在打包好的bundle.js中），让解析后的 css 内容，能够作用到页面中
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    },
    // 5. 插件配置
    plugins: [
        // 我们要把哪个目录下的 html 进行自动生成。
        new HtmlWebpackPlugin({template: './public/index.html'}),
        // 打包并分离出来的css叫什么名字，并在dist中的路径及路径名
        new MiniCssExtractPlugin({
            filename: 'css/index.css'
        })
    ], 
}

五、执行打包脚本

cnpm run build

六、查看打包结果

• 1. 打包后我们发现 dist 文件夹下面的 index.css 文件中包含我们刚刚的 header.less 的样式

     
     image.png

• 2. 打包后我们发现 dist/index.html 放在浏览器中，header.less 中的样式是有作用的。

     
     image.png