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