webpack开发配置

/**
 * webpack打包JS配置
 * 添加eot/woff/ttf/svg
 * 把resposive直接打包到vendor,页面无需引入
 * 添加环境判断&动态获取publicPath
 * @authors Jean Chueng (jean0920@163.com)
 * @date    2016-08-08 10:41:31
 * @version v1.0.2
 */
/****初始设置****/
// 判断开发环境||生产环境||测试环境
var isProduction = function() {
    return process.env.NODE_ENV === 'test'||process.env.NODE_ENV ==='production';
};
var isHot = function() {
    return process.env.NODE_ENV === 'hotdev';
};

// 服务器地址
var server = "http://common.statics.qq.tt:8080";

// 输出环境: '/dev/'表示开发环境;'/dist/'表示生产环境
var sEnvironment = function() {
    switch(process.env.NODE_ENV){
        case 'test':
            return '/test/';
        case 'production':
            return '/dist/';
        default:
            return '/dev/';
    }
};

// 运行终端: 'mobile/'表示微信端;'basic/'表示PC端
var sSystem = 'mobile/';

// 业务模块名: * 为遍历所有业务功能模块
var sFunName = '*';
/****End 初始设置****/

var webpack           = require('webpack'),
    path              = require('path'),
    glob              = require('glob'),
    precss            = require('precss'),
    autoprefixer      = require('autoprefixer'),
    ExtractTextPlugin = require('extract-text-webpack-plugin');

/**-------------------------------------------
 * 获取多页面的每个入口文件，用于配置中的entry
 ---------------------------------------------*/
function getEntry() {
    var entry = {};
    var nLength = sSystem.length - 1;
    //首先我们先读取我们的开发目录 需求功能member 手机端为mobile PC端为basic

    var srcDirName = './src/'+sSystem+sFunName+'/*/*.js';
    glob.sync(srcDirName).forEach(function (name) {
        var n = name.slice(name.lastIndexOf(sSystem) + nLength, name.length - 3);
        n = n.slice(0, n.lastIndexOf('/'));
        //接着我对路径字符串进行了一些裁剪成想要的路径
        entry[n] = name;
        entry['vendor/vendor']=['./src/mobile/common/resposive','./src/mobile/common/common'];
    });
    console.log('是否压缩文件：'+isProduction());
    console.log('输出路径：'+sEnvironment()+sSystem);
    return entry;
}
/**---------
 * 定义插件
 -----------*/
var plugins = [
    //提供全局的变量，在模块中使用无需用require引入
    new webpack.ProvidePlugin({
        jQuery: "jquery",
        $: "jquery",
        "window.jQuery": "jquery"
    }),
    //提取公共模块
    new webpack.optimize.CommonsChunkPlugin({
        name:'vendor/vendor',
        filename:'[name].min.js',
        minChunks: 10,
    }),
    //单独打包css
    new ExtractTextPlugin('[name].min.css'),
];
if( isProduction() ){
    plugins.push(
        //文件压缩/混淆
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            mangle: {
                except: ['$', 'webpackJsonpCallback']
            }
        })
    );
}

/**--------------
 * webpack参数
 ----------------*/
module.exports = {
    entry: getEntry(),//入口文件
    output: {
        //输出路径 终端不同时输出路径不同 手机端为mobile PC端为basic
        path: path.join(__dirname,sEnvironment()+sSystem),
        filename:'[name].min.js',
        publicPath:isHot()?(server+sEnvironment()+sSystem):'../',
        chunkFilename: '[name].[chunkhash:8].js'
    },
    resolve: {
        extensions: ['', '.js', '.json', '.css'],//自动扩展文件后缀
        alias:{
            'layer'     : path.join(__dirname,'src/libs/layer_mobile/layer'),
            'layercss'  : path.join(__dirname,'src/libs/layer_mobile/need/layer'),
            'Validform' : path.join(__dirname,'src/libs/Validform_v5.3.2'),
            'swiper'    : path.join(__dirname,'src/libs/swiper/swiper.jquery.js')
        }
    },
    module: {
        loaders:[
            { test: /\.css$/,  loader:ExtractTextPlugin.extract('style','css?root=./dist/mobile?sourceMap!postcss-loader?')},
            { test: /\.(png|jpe?g|gif|svg)$/, loader: 'url?limit=8192&name=images/[name].[ext]'},
            { test: /\.(eot|ttf|woff)$/i, loader: 'url?limit=10000&name=fonts/[hash:8].[name].[ext]'},
        ]
    },
    postcss: function(){
        return [
            precss,
            autoprefixer({ browsers: '>5%' })
        ];
    },
    externals:{
        jquery:'jQuery',
    },
    plugins: plugins,
    devtool: isProduction()?null:'source-map',
};