webpack_config.js

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


var WEBPACK_ENV       = process.env.WEBPACK_ENV  || 'dev';  //定义开发或者打包模式
//获取HtmlWebpackPlugin参数的方法
function getHtmlPage(name){
    return {
            template : './src/view/'+name+'.html',      //文件输入位置
            filename : 'view/'+name+'.html',            //文件输出位置，相对于output path
            inject   : 'head',      //js文件位置，head在head元素中，body在body底部
            hash     : 'true',      //文件末尾添加hash值，可清除缓存
            chunks   : ['common',name]
        }
}
module.exports = {
    entry:{         //文件入口
    'index':['./src/page/index/index.js'],
    'login':['./src/page/login/index.js'],
        'common':['./src/page/common/index.js']      //通用js
    },
    output: {       //文件输出
        path: './dist',             //设置文件输出路径
        publicPath: '/dist',        //设置浏览器访问路径
        filename: "js/[name].js"    //生成js文件名
    },
    module: {               //loader配置
        loaders: [  
        {
          test: /\.css$/,
             loader:  ExtractTextPlugin.extract("style-loader","css-loader")        //css加载器
        },
        {test:/\.(png|jpg)$/,loader:"url-loader?limit=8192&name=img/[name][hash:8].[ext]"}      //图片加载器
        ]
    },
    externals: {
        'jquery' : 'window.jQuery'          //使用npm中Jquery
    },
    plugins: [          //以下目录都以output path为相对路径
        new webpack.optimize.CommonsChunkPlugin({       //提取通用js插件
            name : 'common',            //通用js名称
            filename : 'js/base.js'
        }),
        //css文件打包插件
        new ExtractTextPlugin("css/[name].css"),
        //html模板处理 插件
        new HtmlWebpackPlugin(getHtmlPage('index')),
        new HtmlWebpackPlugin(getHtmlPage('login'))
        ]
    };
if('dev'=== WEBPACK_ENV){           //设置开发模式
    config.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
}