webpack常规开发配置

webpack是现在非常流行的前端构建工具，下面介绍下webpack常规的配置

常用插件

1. babel:
   es6+编译成es5插件
   安装：npm install babel-loader babel-core babel-preset-es2015 --save-dev

var webpack = require('webpack');

// 加载html
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 加载css
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: {
        index : './src/js/index.js'
    },
    output: {
        path: './dist',
        filename: 'index.js',
        sourceMapFilename: "index.js.map",
    },
    module: {
        //加载器配置
        loaders: [
            {test : /\.(less|css)$/, loader: ExtractTextPlugin.extract('style', '!css!less')},
            { test: /\.(png|jpg)$/, loader: 'file-loader?limit=8192'},
            { test: /\.html$/, loader: 'html'}
        ]
    },
    plugins: [
        new ExtractTextPlugin('[name].css'),
        new HtmlWebpackPlugin({
            title: 'bigPicture',
            filename: 'index.html',
            template: 'src/page/index.html',
            files: {
                css: ['[name].css']
            }
        })
    ],
    devServer: {
        colors: true,
        historyApiFallback: true,
        inline: true
    }
}