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

}