WebPack详细入门教程（三）之loader加载器（eg:引入CSS）

WebPack详细入门教程之loader加载器

---

Loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss、less为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。

1.首先一次性安装所有的依赖包

// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install babel-loader babel babel-core css-loader style-loader url-loader file-loader less-loader less  --save-dev

---

2.下载完成后, 修改webpack.config.js配置, 将加载器引入

Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置，Loaders的配置包括以下几方面：

每一个都可以有以下几个属性。 

1.test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
2.loader：loader的名称（必须）
3.include:手动添加必须处理的文件（文件夹）（可选）；
4.exclude：排除屏蔽不需要处理的文件（文件夹） （可选）；
5.query：为loaders提供额外的设置选项（可选）

module.exports = {
    devtool: 'eval-source-map',
    entry: __dirname + '/demo/js/main.js', //入口文件
    output: { //输出文件
        filename: 'index.js', //输出文件名
        path: __dirname + '/out' //输出文件路径
    },
    module: {
    	// rules为数组，保存每个加载器的配置
        rules: [
	　　　　　/*解析css*/
            {	
                test: /\.css$/,   // test属性必须配置，值为正则表达式，用于匹配文件
                
                //对同一个文件引入多个loader的方法。
                use: [ 
                    {
                        loader: "style-loader"   // loader属性必须配置，值为字符串
                    }, 
                    {
                        loader: "css-loader"
                    }
                ],
                
　　　　　　　　exclude: /node_module/,   // 过滤，排除node_module目录下的文件
　　　　　　　　include: /demo/   // 指定匹配文件的范围　　　　　　
            }　　
        ]　
    }
}

---

3.在项目文件夹下的src文件夹下创建index.css.

//index.css

body {
    background: #eee;
}

因为在webpack中所有文件都是模块, 所以必须要将css引入. 在刚刚的main.js中添加如下代码.

//引入外部css样式，下面两种写法都可以使用：

require('../css/index.css');
import '../css/index.css';

webpack打包页面就会有效果啦~