04_04.less-loader使用

1. 首先在根目录下载 less-loader

npm i less less-loader -D

2. 要操作的相关文件：

3. 首先用模块化的思想将需要使用的js模块暴露出来。（参考04_01.webpack打包初体验）

4. main.js内容

/*
 * @Author: Robyn 
 * @Date: 2017-11-16 17:27:06 
 * @Last Modified by: Robyn
 * @Last Modified time: 2017-11-16 19:12:29
 */
let obj = require('./a.js'),
    fn = require('./b.js');

require('./index.less');

fn(obj.a,obj.b);

5. webpack.config.js

/*
 * @Author: Robyn 
 * @Date: 2017-11-16 20:06:29 
 * @Last Modified by:   Robyn 
 * @Last Modified time: 2017-11-16 20:06:29 
 */
// 这个配置文件里面使用node的方式来编写
// 该配置文件必须向外暴漏一个配置对象, 供将来的webpack工具调用
const path = require('path');

// 导入插件
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 入口
    entry: path.resolve(__dirname, './src/main.js'),

    // 输出
    // webpack在打包文件的时候, 提供了一些变量, 有一个chunkhash变量
    // 它是值是根据打包后的文件内容计算出来的, 为了解决用户缓存的问题, 
    // 我们一般会把这个变量的值拼接到我们的文件中
    output: {
        path: path.resolve(__dirname, 'dist'), // 输出路径,一般起名为dist目录
        filename: 'bundle_[chunkhash:8].js'      // 打包后的文件名, 一般起名为bundle.js
    },

    // 配置插件, 这里面存存放各种插件实例
    plugins: [

        // 配置一个html插件, 用于自动注入打包后的js
        new htmlWebpackPlugin({
            template: './src/index.html',  // 要注入js的html
            filename: 'index.html',         // webpack不会修改源代码, 而是把修改后的文件输出到一个地方
            inject: 'body',
            minify:{ // 压缩优化HTML页面
                collapseWhitespace:true, // 合并空白字符
                removeComments:true, // 移除注释
                removeAttributeQuotes:true // 移除属性上的引号
            }
        })
    ],

    // webpack默认只能打包js, 要支持其他文件的打包, 需要在这里面加配置
    module: {

        // 配置规则
        rules: [

            
            // 打包less文件
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    }
};

6. 根目录下执行以下命令：

webpack