webpack.config.js文件配置

var webpack = require('webpack');

//加载路径解析库
var path = require('path');

//yargs解决了如何处理命令行参数的问题
var argv = require('yargs').argv;

var outputs = [path.join(__dirname, 'src/main/resources/html/dist'), path.join(__dirname, 'src/main/resources/html/dist'), path.join(__dirname, 'src/main/resources/html/dist'), path.join(__dirname, 'webapp/dist'), path.join(__dirname, 'webapp/dist')];
//输出路径下标匹配
var op_index = argv.m || 0; // 0=前端, 1=开发， 2=部署， --m=0
//将css文件从js文件中提取出来的插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var SpritesmithPlugin = require('webpack-spritesmith');

var config = {
    //context表示上下文，指的是当前项目运行路径，_dirname表示运行时的当前根路径
    context: path.join(__dirname, 'javascript'),
    //定义路口文件
    entry: {
        common: ['angular', 'angular-resource', 'angular-sanitize', 'angular-ui-router', 'jquery', 'layer', 'oclazyload', './js/App', 'hostsetter', 'fastjson', 'date'],
        index: './js/controller/Index',
        market: './js/controller/Market',
        roadshow: './js/controller/Roadshow',
        courseList: './js/controller/Course.js',
        newsList: './js/controller/News.js',
        incubator: './js/controller/Incubator.js',
        partner: './js/controller/Partner.js',
        center: './js/controller/Center.js',
        search: './js/controller/Search.js',
        indexes: './js/lib/indexes',
        about: './js/controller/About',
        pay: './js/controller/Pay',
    },
    //输出路径
    output: {
        path: outputs[op_index],
        //上线后的运行地址/域名
        publicPath: '/dist/',
        jsonpFunction: 'MACAU',
        filename: '[name].js?v=[chunkhash]',
        //指定域名
        cdns: ['']
    },
    //导入需要的loaders
    module: {
        loaders: [{
            test: /\.(html|png|gif|jpg|jpeg|eto|eot|woff|ttf|svg|woff2)(\?[^?]+)?$/,
            loader: 'file-loader'
        }, {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader")
        }, {
            //test表示正则匹配
            test: /\.less$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader!less-loader")
        }]
    },
    //postcss也是一个loader
    postcss: function() {
        return [
            //precss是css预处理器，1：使得css可以嵌套书写，2可以定义变量，同时定义函数，对该方法进行复用
            require('precss'),
            //autoprefixer是自动帮助css增加浏览器前缀，由于css3标准尚未统一，不同的浏览器对于css样式支持的格式有所不同
            require('autoprefixer')({ browsers: ['>1%'] })
        ];
    },
    resolve: {
        /*
        webpack在构建包的时候会按目录的进行文件的查找，resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀：
        如果我们需要引入common.js文件，只需要写成require('common')即可
         */
        extensions: ['', '.js', '.json'],
        //指定别名
        alias: {
            'layer': path.join(__dirname, 'javascript/js/lib/layer'), //弹窗
            'form.validate': path.join(__dirname, 'javascript/js/lib/form.validate'), //验证
            'fastjson': path.join(__dirname, 'javascript/js/lib/fastjson'), //fastjson取值工具
            'urlparser': path.join(__dirname, 'javascript/js/lib/urlparser'), //
            'date': path.join(__dirname, 'javascript/js/lib/date'), //
            'fileupload': path.join(__dirname, 'javascript/js/lib/fileupload'), //
            'hostsetter': path.join(__dirname, 'javascript/js/lib/hostsetter'), //
            'ueditor.config': path.join(__dirname + '/javascript/js/util/ueditor.config'),
            'ueditor': path.join(__dirname + '/javascript/js/util/ueditor.all'),
            'angular-ueditor': path.join(__dirname + '/javascript/js/util/angular-ueditor')
        }
    },
    //映射文件，方便将压缩后的文件已正常的json形式展现出来
    devtool: 'source-map',

    //插件
    plugins: [
        new webpack.NoErrorsPlugin(), //
        new ExtractTextPlugin("[name].css"), //
        new webpack.optimize.CommonsChunkPlugin(['common'], 'jquery.js'), //
        /*
        externals指的是引入那些需要在项目中欧使用到的但又不想在运行时倒入源码的库或者API
        ProvidePlugin用来自动加载模块
         */
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        }),
        new SpritesmithPlugin({
            // 目标小图标
            src: {
                cwd: path.resolve(__dirname, './javascript/img/icons'),
                glob: '*.png'
            },
            // 输出雪碧图文件及样式文件
            target: {
                image: path.resolve(__dirname, './src/main/resources/html/dist/sprites/sprite.png'),
                css: path.resolve(__dirname, './src/main/resources/html/dist/sprites/sprite.css')
            },
            // 样式文件中调用雪碧图地址写法
            apiOptions: {
                cssImageRef: '../sprites/sprite.png'
            },
            spritesmithOptions: {
                algorithm: 'top-down'
            }
        })
    ]
}

// 如果是正式环境下
if (op_index == '2') {
    delete config.devtool;
    config.plugins[config.plugins.length] = new webpack.optimize.UglifyJsPlugin({
        mangle: {
            except: ['$super', '$', 'exports']
        },
        comments: false
    })
}
//
module.exports = config;