webpack 入口文件 php,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',

};