webpack多入口文件配置模板

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

本篇文章是目前多入口项目中使用的配置文件，配置文件匹配目录规范使用。

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",
};