Webpack 之 less-loader 详解

安装

npm install --save-dev less-loader less

---

使用

先来一个小栗子：

// layer.js
// 首先我引入了layer.less

import './layer.less';
function layer() {
    return {
        name: 'layer',
        template: tep
    };
}

export default layer;

// layer.less

@import'./flex.less';

.layer{
    width: 600px;
    height: 400px;
    background: green;
    
    .div {
        width: 300px;
        height: 200px;
        background: #ccc;
    }
}

// flex.less
.div{
    display: flex; 
}

// webpack.comfig.js
// 该配置是延续上一版写的，只需看处理.less那块就好
var htmlWebpackPlugin = require('html-webpack-plugin')

const path = require('path')
module.exports = {
    mode: 'development',
    entry: './src/app.js',
    output: {
        filename: 'js/bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,  // 优化处理加快速度
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.css$/,
                exclude: '/node_modules/',
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: (loader) => [
                              require('postcss-import')({ root: loader.resourcePath }),
                              require('postcss-cssnext')(),
                              require('autoprefixer')(),
                              require('cssnano')()
                            ]
                          }
                    }
                ]
            },
            {
                test: /\.less$/,
                exclude : '/node_modules',
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',   
                        options: {
                            importLoaders: 1
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: (loader) => [
                              require('postcss-import')({ root: loader.resourcePath }),
                              require('postcss-cssnext')(),
                              require('autoprefixer')(),
                              require('cssnano')()
                            ]
                          }
                    },
                    {
                        loader: 'less-loader',  // 
                        options: {
                            importLoaders: 1
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html',
            inject: 'body',
            filename: 'index.html'
        })
    ]
}

// 需要注意的是顺序问题： style-loader -> css-loader -> postcss-loader -> less-loader 执行顺序于此相反。

---

将打包的less文件分离出来

在官方文档看到这样一个例子：

// 需要 npm 安装extract-text-webpack-plugin 插件
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractLess = new ExtractTextPlugin({
    filename: "[name].[contenthash].css",
    disable: process.env.NODE_ENV === "development"
});

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: extractLess.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "less-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
        }]
    },
    plugins: [
        extractLess
    ]
};

但是我这里使用的是webpack 4X ，而extract-text-webpack-plugin 只支持 webpack 3X 。

那webpack 4X怎么对css分离呢，需要安装 mini-css-extract-plugin

稍后会补充一个mini-css-extract-plugin的例子 ~~

如果想使用插件

// 只需在options中配置即可
// webpack.config.js
const CleanCSSPlugin = require("less-plugin-clean-css");

module.exports = {
    ...
            {
                loader: "less-loader", options: {
                    plugins: [
                        new CleanCSSPlugin({ advanced: true })
                    ]
                }
            }]
    ...
};