用webpack从零开始构建脚手架 ---webpack-2 （loaders， plugins，mode，文件监听，热更新 ）

1：创建 index.css  并引入

import styles  from './index.css'

执行npm run build  提示错误信息 需要配置loaders 

接下来 来学习如何配置loaders

2 :配置 loaders  作用 

A ：定义：通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件

B .基本参数

Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置，Loaders的配置包括以下几方面：
test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
loader：loader的名称（必须）
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
query/option：为loaders提供额外的设置选项（可选）

C: 配置常用Loader 如下  。不一一解说了 常用的loader入下 

 loaders 的配置

'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: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10240
                        }
                    }
                ]
            },
            {
                test: /.(woff|woff2|eot|ttf|otf)$/,
                use: 'file-loader'
            }
        ]
    },
};