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

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.cssbody {    background: #eee;}

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

//引入外部css样式，下面两种写法都可以使用：require('../css/index.css');import '../css/index.css';

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