Vue学习18.1-----webpack打包处理less文件

1、运行

npm i less-loader less -D

2、配置webpack.config.js文件

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
//创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    //指定要用到的模板
    template:'./src/index.html',
    //指定生成的文件的名称，文件存在内存中，在目录中不显示
    filename:'index.html'
});

module.exports = {
    //编译模式
    mode:'development',//development production
    entry:path.join(__dirname,'./src/index.js'),
    output:{
        //输出文件的路径
         path:path.join(__dirname,'./dist'),
         //输出文件名
         filename:'bundle.js'
    },
    plugins:[htmlPlugin],
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},
            
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
        ]
    }

};

3、index.js 引入import './css/ys.less'

4、创建ys.less文件

body{
    margin: 0;
    padding: 0;
    ul{
        padding: 0;
        margin: 0;
    }
}

5、运行 npm run dev