webpack之解析CSS ，Less

一、解析css

1.安装：cnpm i style-loader css-loader -D

 css-loader用于加载.css文件，并转换成commonjs对象(因为webpack只支持js和json语法)

style-loader用于将<style>标签插入到header中

2.在src下新建index.css文件

#div{
    color: red;
    font-size: 50px;
}

3.注意，这里的css文件需要在入口文件index.js中导入

import './index.css';

4..webpack.config.js中配置：

"use strict";

const path=require('path');

module.exports={
    entry:'./src/index.js',
    output:{
        path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    },
    mode:'production',
    module:{
        rules:[
            {
                test:/.css$/,
                //loader是链式调用，执行顺序是从右到左 
                use:['style-loader','css-loader']
            }
        ]
    }
}

5.npm run build打包完成

二、解析less

和上述流程差不多:

1.先安装 cnpm i less less-loader -D

2.新建less文件

3.在入口文件导入

4,配置：

{
   test:/\.less$/,
   use:['style-loader','css-loader','less-loader']
}

5.打包