webpack配置开发环境（html-webpack-plugin、css-loader、less-loader、babel-loader）

这篇文章简单的说一下前端构建工具——webpack；
在用过的前端构建工具Yeoman，grunt，gulp，webpack中，个人觉得从配置上、使用上，功能上讲，还是webpack略胜一筹；
下面就简单的说一下webpack的配置；
一言不合贴代码：
首先介绍webpack.config.js配置文件

module.exports = {
    entry:'',//单一路径情况下是字符串，例如：'./src/app.js';多路径是由多个路径字符串构成的数组['./src/app.js','./pblc/master.js']
    output:{
        path:'',
        filename:''
    }
};

上面这段代码是webpack配置文件的重要配置，需要配置入口和出口，前端构建工具很多，但是思想大多雷同，都是设置一个文件的入口，将文件送入作用流，经过n多个中间件的作用，然后从出口吐出来得到你想要的文件。所以配置入口和出口是webpack最基本的也是必须的。
下面介绍三种webpack的plugin；
1.html-webpack-plugin
这个plugin的作用是自动生成html页面，可以用它生成我们的单页应用的入口页面，下面看下配置；

var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    plugins:[
        new htmlWebpackPlugin ({
            filename:'takeout.html',
            template:'index.html',
            inject:'body'
        })
    ]
}

直接new一个该插件的实例，并给其传一个对象作为参数；filename是指要生成文件的文件名；template是指定以哪个文件问模板渲染；inject是将html中的script标签动态添加到哪里，是添加到body里还是添加到head里，如果不添加，直接写false；

2.babel-loader
用于将浏览器不支持的高版本js语法转化成浏览器支持的版本；

module.exports = {
    module:{
        loaders : [
            {
                test:/\.js$/,// 用正则表达式来指定js文件
                loader:'babel-loader',// 若为js文件，则用babel-loader来处理；
                exclude:path.resolve(__dirname,'node-modules'),
                include:path.resolve(__dirname,'src'),
                query:{presets:['es2015']}// 根据babel官网需要指定转化成es5；还要下载es2015；
            }
        ]
    }
}

js语法的转换需要用到babel-loader，所以首先应该下载babel-loader：npm install babel-loader --save-dev --verbose配置如上，在module配置项中添加loaders字段，它的值是个数组，也是loader的集合，每个loader在一个对象中配置；这里babel-loader配置中test字段是通过正则来选取要转化的文件，loader字段是指定用什么loader来处理这些文件（这里我们用babel-loader）；exclude字段是排除掉那些路径下的文件，使其不经过babel处理；include字段是指定哪个文件夹下的文件要用babel处理，query字段是babel官方规定的字段，在其对象中，我们需要设置用babel把选中的js文件转化成哪个版本的js，这里我选择了转化成es5；

3.css-loader
css-loader是处理css文件的插件，webpack需要css-loader对css文件进行处理，才能进行打包等操作；

module.exports = {
    module:{
        loaders : [
            {
                test:/\.css$/,
                loader:'style-loader!css-loader'
            }
        ]
    }
}

这里同babel-loader一样，css-loader的配置同样是写在modules中的loaders数组里；首先也是用正则选取要处理的css文件，然后loader字段中，配置了从右往左执行的loader，也就是说先找到css文件，然后对其执行css-loader出路，css-loader处理完了，将文件扔给style-loader处理，这里用到的style-loader的作用是将文件引入都页面中，也就是把这个处理好的css文件link进html页面中；

4.less-loader
less-loader同css-loader一样的配置

module.exports = {
    module:{
        loaders : [
            {
                test:/\.less$/,
                loader:'style-loader!css-loader!less-loader'
            }
        ]
    }
}

这里的loader字段中，将less-loader最先执行，请注意执行顺序，先选取less文件，然后交给less-loader处理成css文件，再交给css-loader处理，最后交给style-loader插入到页面中；

希望这些webpack配置可以帮到你，这里贴出我完整的配置；

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = {
    entry:'./src/app.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'js/[hash].bundle.js'
    },
    module:{
        loaders : [
            {
                test:/\.js$/,// 用正则表达式来指定js文件
                loader:'babel-loader',// 若为js文件，则用babel-loader来处理；
                exclude:path.resolve(__dirname,'node-modules'),
                include:path.resolve(__dirname,'src'),
                query:{presets:['es2015']}// 根据babel官网需要指定转化成es5；还要下载es2015；
            },
            {
                test:/\.css$/,
                loader:'style-loader!css-loader',
            },
            {
                test:/\.less$/,
                loader:'style-loader!css-loader!less-loader',
            }
        ]
    },
    plugins:[
        new htmlWebpackPlugin ({
            filename:'takeout.html',
            template:'index.html',
            inject:'body'
        })
    ]

}