博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
webpack开发配置
阅读量:6956 次
发布时间:2019-06-27

本文共 3977 字,大约阅读时间需要 13 分钟。

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

 

转载于:https://www.cnblogs.com/jeanchueng/p/5691268.html

你可能感兴趣的文章
如何提高Assignment写作效率?
查看>>
给定一个串,去掉连续的重复字母,
查看>>
ExtJS(MVC)+PHP(ThinkPHP)+MySql5.0 开发框架准备阶段
查看>>
dd命令
查看>>
cobbler 安装部署
查看>>
0.11.1版本docker安装与使用
查看>>
我的友情链接
查看>>
小学四则运算
查看>>
jenkins+docker的简单项目部署
查看>>
Spring工具类:WebApplicationContextUtils
查看>>
MSR2010配置小记
查看>>
(20120722)(笔记004)android开发应用程序资源
查看>>
Jquery extend的用法
查看>>
URL参数解析为一个对象
查看>>
【吾日三省吾身】2015.6.25-涅槃行动第三十八天
查看>>
python脚本输出不换行或者输出换行
查看>>
虚拟网卡实现虚拟机与本机互访
查看>>
我的友情链接
查看>>
Spark-GraphxAPI学习笔记
查看>>
异次元软件
查看>>