摘要：概述本篇文章是目前多入口項目中使用的配置文件，配置文件匹配目錄規范使用。

本篇文章是目前多入口項目中使用的配置文件，配置文件匹配目錄規范使用。

package.json

  "scripts": {
    "hot": "set NODE_ENV=hotdev&&webpack-dev-server --inline --hot --colors --host 127.0.1.1 --port 80",
    "dev": "set NODE_ENV=development&&webpack --progress --colors",
    "product": "set NODE_ENV=production&&webpack --progress --colors"
  },

webpack.config.js

// 判斷生產&&測試環境
var isProduction = function() {
    return process.env.NODE_ENV ==="production";
};

// 判斷開發(熱加載)環境
var isHot = function() {
    return process.env.NODE_ENV === "hotdev";
};

// 不同環境輸出到不同文件夾
var sEnvironment = function() {
    switch(process.env.NODE_ENV){
        case "hotdev":
            return "/hot/";
        case "production":
            return "/dist/";
        default:
            return "/dev/";
    }
};

// 運行終端: "mobile/"表示微信端;"basic/"表示PC端
// 項目原因有兩套配置文件
var sSystem = "basic/";

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

function getEntry() {
    var entry = {};
    var nLength = sSystem.length - 1;
    var srcDirName = "./src/ovdream/"+sSystem+"*/*/*.js"; //需要獲取的文件路徑
    
    glob.sync(srcDirName).forEach(function (name) {
        //name:./src/ovdream/basic/member/index/index.js
        
        //裁剪路徑
        var n = name.slice(name.lastIndexOf(sSystem) + nLength, name.length - 3);
        //n:/member/index/index
        n = n.slice(0, n.lastIndexOf("/"));
        //n:/member/index
        
        entry[n] = name;
        
        if(sSystem==="mobile/"){
            //此處可引入第三方庫文件等需要打包成公共模塊的文件
            entry["vendor/vendor"]=["./src/ovdream/global/global.css"];
        }else{
            entry["vendor/vendor"]=["./src/ovdream/global/global.js","./src/libs/layer/need/layer.css",;
        }
    });
    console.log("是否壓縮文件："+isProduction());
    console.log("輸出路徑："+sEnvironment()+"ovdream/"+sSystem);
    return entry;
}

別名

var alias={};
if(sSystem==="mobile/"){
    alias={
        "layer": "layer_mobile/layer",
        "layercss": "layer_mobile/need/layer",
    };
}else{
    alias={
        "layer": "layer/layer",
        "layercss": "layer/need/layer",
    };
}

插件

var plugins = [
    //提供全局的變量，在模塊中使用無需用require引入
    new webpack.ProvidePlugin({
        jQuery: "jquery",
        $: "jquery",
        "window.jQuery": "jquery"
    }),
    //提取公共模塊
    new webpack.optimize.CommonsChunkPlugin({
        name: "vendor/vendor",
        filename: "[name].min.js",
        //開發模式時不提取公共模塊
        minChunks: isProduction() ? 10 : false
    }),
    //多帶帶打包css
    new ExtractTextPlugin("[name].min.css"),
];
if (isProduction()) {
    plugins.push(
        //文件壓縮/混淆
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            mangle: {
                except: ["$", "webpackJsonpCallback"]
            }
        })
    );
}

module.exports = {
    entry: getEntry(),//入口文件
    output: {
        path: path.join(__dirname,sEnvironment()+"ovdream/"+sSystem),
        /**
        用于配置文件發布路徑；
        開發&測試&生產環境為"../"，加載路徑動態獲取
        熱加載環境時配置域名及輸出文件夾
        在入口文件中配置__webpack_public_path__（一般配置在vendor文件中）
        **/
        publicPath:isHot()?("http://common.statics.ovdream.com"+sEnvironment()+"ovdream/"+sSystem):"../",
        filename:"[name].min.js",
        //異步加載文件命名，hash值避免重命名
        chunkFilename: "[name].[chunkhash:8].js"
    },
    resolve: {
        extensions: ["", ".js", ".json", ".css"],//自動擴展文件后綴
        root: [//設置alias文件引用根目錄
            path.resolve("./src/libs")
        ],
        alias:alias
    },
    module: {
        loaders:[
            { test: /.css$/,  loader:ExtractTextPlugin.extract("style-loader","css-loader?sourceMap!postcss-loader")},
            { test: /.(png|jpg|gif|svg)$/, loader: "url-loader?limit=8192&name=image/[name].[ext]"},
            {
               test: /.(eot|ttf|woff)$/i,
               loader: "url?limit=10000&name=fonts/[name].[ext]"
            }
        ]
    },
    postcss: function() {
        if(sSystem==="mobile/"){
            return [
                precss,
                autoprefixer({ browsers: [">5%", "ios 7", "ios 8"] })
            ];
        }else{
            return [
                precss,
                autoprefixer({ browsers: ">5%"})
            ];
        }
    },
    //外部變量jQuery，在頁面script引入
    externals:{
        jquery:"jQuery"
    },
    plugins: plugins,
    //生產模式時關閉sourece-map模式
    devtool: isProduction()?null:"source-map",
};