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'
})
]

}