webpack开发配置
/** * webpack打包JS配置 * 添加eot/woff/ttf/svg * 把resposive直接打包到vendor,页面无需引入
* 添加环境判断&动态获取publicPath * @authors Jean Chueng (jean0920@163.com) * @date 2016-08-08 10:41:31 * @version v1.0.2 */ /****初始设置****/ // 判断开发环境||生产环境||测试环境 var isProduction = function() { return process.env.NODE_ENV === 'test'||process.env.NODE_ENV ==='production'; }; var isHot = function() { return process.env.NODE_ENV === 'hotdev'; }; // 服务器地址 var server = "http://common.statics.qq.tt:8080"; // 输出环境: '/dev/'表示开发环境;'/dist/'表示生产环境 var sEnvironment = function() { switch(process.env.NODE_ENV){ case 'test': return '/test/'; case 'production': return '/dist/'; default: return '/dev/'; } }; // 运行终端: 'mobile/'表示微信端;'basic/'表示PC端 var sSystem = 'mobile/'; // 业务模块名: * 为遍历所有业务功能模块 var sFunName = '*'; /****End 初始设置****/ var webpack = require('webpack'), path = require('path'), glob = require('glob'), precss = require('precss'), autoprefixer = require('autoprefixer'), ExtractTextPlugin = require('extract-text-webpack-plugin'); /**------------------------------------------- * 获取多页面的每个入口文件,用于配置中的entry ---------------------------------------------*/ function getEntry() { var entry = {}; var nLength = sSystem.length - 1; //首先我们先读取我们的开发目录 需求功能member 手机端为mobile PC端为basic var srcDirName = './src/'+sSystem+sFunName+'/*/*.js'; glob.sync(srcDirName).forEach(function (name) { var n = name.slice(name.lastIndexOf(sSystem) + nLength, name.length - 3); n = n.slice(0, n.lastIndexOf('/')); //接着我对路径字符串进行了一些裁剪成想要的路径 entry[n] = name; entry['vendor/vendor']=['./src/mobile/common/resposive','./src/mobile/common/common']; }); console.log('是否压缩文件:'+isProduction()); console.log('输出路径:'+sEnvironment()+sSystem); return entry; } /**--------- * 定义插件 -----------*/ var plugins = [ //提供全局的变量,在模块中使用无需用require引入 new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery", "window.jQuery": "jquery" }), //提取公共模块 new webpack.optimize.CommonsChunkPlugin({ name:'vendor/vendor', filename:'[name].min.js', minChunks: 10, }), //单独打包css new ExtractTextPlugin('[name].min.css'), ]; if( isProduction() ){ plugins.push( //文件压缩/混淆 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, mangle: { except: ['$', 'webpackJsonpCallback'] } }) ); } /**-------------- * webpack参数 ----------------*/ module.exports = { entry: getEntry(),//入口文件 output: { //输出路径 终端不同时输出路径不同 手机端为mobile PC端为basic path: path.join(__dirname,sEnvironment()+sSystem), filename:'[name].min.js', publicPath:isHot()?(server+sEnvironment()+sSystem):'../', chunkFilename: '[name].[chunkhash:8].js' }, resolve: { extensions: ['', '.js', '.json', '.css'],//自动扩展文件后缀 alias:{ 'layer' : path.join(__dirname,'src/libs/layer_mobile/layer'), 'layercss' : path.join(__dirname,'src/libs/layer_mobile/need/layer'), 'Validform' : path.join(__dirname,'src/libs/Validform_v5.3.2'), 'swiper' : path.join(__dirname,'src/libs/swiper/swiper.jquery.js') } }, module: { loaders:[ { test: /\.css$/, loader:ExtractTextPlugin.extract('style','css?root=./dist/mobile?sourceMap!postcss-loader?')}, { test: /\.(png|jpe?g|gif|svg)$/, loader: 'url?limit=8192&name=images/[name].[ext]'}, { test: /\.(eot|ttf|woff)$/i, loader: 'url?limit=10000&name=fonts/[hash:8].[name].[ext]'}, ] }, postcss: function(){ return [ precss, autoprefixer({ browsers: '>5%' }) ]; }, externals:{ jquery:'jQuery', }, plugins: plugins, devtool: isProduction()?null:'source-map', };