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