一:module参数配置

关于模块的加载相关，我们就定义在module.rules。这里通过正则表达式去匹配不同后缀的文件名，然后给它们定义不同的加载器

二:打包css文件

1. 安装如下两个包，

                                            
cnpm install -save-dev css-loader       //解析css文件的加载器
cnpm install -save-dev style-loader     //将css文件添加到文档style中的加载器
                                            
                                        

2. 配置modules，增加如下rules部分

                                            
let path=require('path');
module.exports={
    entry:'./src/index.js',
    output:{
        path:path.join(__dirname,'./static/js/'),
        filename:'bundle.js'
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
              }
        ]
    }
}
                                            
                                        

注意:use里面的加载器是从后往前加载，在这个地方强调一下

3. 准备工作完成，接下来我们新建一个css文件，然后index.js中导入；由此可见Es6 import是可以直接导入样式文件的

                                            
// ./static/css/index.css
#root {
    background:rgb(0, 0, 0);
    color:rgb(255, 255, 255);
}
//index.js
var xiaobai1=require('../static/js/controllers/xiaobai1');
var xiaobai2=require('../static/js/controllers/xiaobai2');
import css from '../static/css/index.css'
document.getElementById('root').appendChild(xiaobai1());
document.getElementById('root').appendChild(xiaobai2());
                                            
                                        

4. 执行webpack;运行index.html，查看结果

三:打包less文件

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能

1. 安装如下两个包

                                            
cnpm install -save-dev less-loader       //解析less文件的加载器
cnpm install -save-dev less              //在打包过程中,将less文件编译为css文件
                                            
                                        

2. 配置less的rule

                                            
let path=require('path');
module.exports={
    entry:'./src/index.js',
    output:{
        path:path.join(__dirname,'./static/js/'),
        filename:'bundle.js'
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
              },
                                                             {
                test: /\.less$/,
                use: [ 'style-loader', 'css-loader', 'less-loader' ]
              }

        ]
    }
}
                                            
                                        

3. 准备工作完成，新建一个less文件，在index.js中导入；

                                            
@width: 150px;
@height: @width + 10px;
#root {
  width: @width;
  height: @height;
}   
                                            
                                        

4. 执行webpack;运行index.html，查看结果

四:在样式文件中引入样式文件

1. 为什么要在样式文件中引入样式文件呢，我们新建两个伪类样式的css文件

                                            
//before.css
#root::before {
    content:"I'm before.css"
}

//after.css                                 
#root::after {
    content:"I'm after.css"
}

                                            
                                        

然后在index.js中引入，如下

                                            
//index.js
var xiaobai1=require('../static/js/controllers/xiaobai1');
var xiaobai2=require('../static/js/controllers/xiaobai2');
import css from '../static/css/index.css'
import before from '../static/css/before.css'
import after from '../static/css/after.css'
import less from '../static/css/index.less'

document.getElementById('root').appendChild(xiaobai1());
document.getElementById('root').appendChild(xiaobai2());
                                            
                                        

到这里已经是不是有点恐慌了，如果随着项目扩大，有大量的样式文件和js文件需要加载，那入口文件显得难以阅读

2. 解决方法,新建一个主样式文件，这里以index.less为主样式文件，在它里面加载所有的样式，最后只需要在入口文件加载index.less即可

                                            
//index.less
@import './index.css';
@import './before.css';
@import './after.css';
@width: 150px;
@height: @width + 10px;
#root {
  width: @width;
  height: @height;
}   

//index.js
var xiaobai1=require('../static/js/controllers/xiaobai1');
var xiaobai2=require('../static/js/controllers/xiaobai2');
import less from '../static/css/index.less'

document.getElementById('root').appendChild(xiaobai1());
document.getElementById('root').appendChild(xiaobai2());