/*** 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端为basicvar 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,}),//单独打包cssnew 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端为basicpath: 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

webpack开发配置相关推荐

  1. webpack开发配置API代理proxy,解决跨域问题

    1. 一个完整的webpack配置代理代码 设置代理需要: 1.需要使用本地开发插件:webpack-dev-server. 2.webpack-dev-server 使用的是 http-proxy- ...

  2. webpack开发配置API代理解决跨域问题-devServer

    1. 一个完整的webpack配置代理代码 设置代理的前提条件: 1.需要使用本地开发插件:webpack-dev-server. 2.webpack-dev-server使用的是http-proxy ...

  3. 前端进阶(二)webpack开发服务器环境配置

    webpack开发服务器 webpack 使用 babel 处理高版本的 js 语法 babel 的介绍 => 用于处理高版本 js语法 的兼容性 安装包 yarn add -D babel-l ...

  4. React + Typescript + Webpack 开发环境配置

    对于复杂或多人开发的 React 项目来说,管理和使用每个组件的 props . state 或许会成为一件让人头痛的事情,而为每一个组件写文档,成本也会比较大,对项目的开发效率也不是最理想的. Ty ...

  5. webpack开发Vue配置 1

    在webpack的世界里,一张图片.一个css甚至一个字体,都成为模块(Module),彼此存在依赖关系,webpack就是来处理模块间的依赖关系的,并把它们进行打包. webpack的主要适用场景是 ...

  6. webpack 开发模式管理 Development

    webpack 开发模式管理 Development GitHub 学习 Demo. 接下来将一些开发时的 webpack 配置. warnning : 本指南中的工具仅用于开发,请避免在生产中使用它 ...

  7. 六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离

    一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...

  8. vue-cli+webpack打包配置

    vue-cli+webpack打包配置 一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── ut ...

  9. 三.webpack基本配置

    webpack基本配置 1.关于webpack.config.js 首先我们先建立这样的目录 文件说明: src : 放置源文件的目录 dist : 放置打包后文件的目录 index.html : 初 ...

最新文章

  1. spring之旅第四篇-注解配置详解
  2. 输电线路巡检机器人PPT_超高压输电线路巡检机器人系统
  3. C++ 容器 LIST VECTOR erase
  4. 最简单的 ABAP XSLT 程序的一个例子
  5. 【0718作业】收集和整理面向对象的六大设计原则
  6. 排序二叉树 SortBinaryTree
  7. NHibernate第一个实例
  8. 科研诚信与学术规范_大学教授学术造假,违背科研诚信
  9. 喜欢网络文学的人有多少?当代年轻人是这样阅读的
  10. java里加载是什么意思_Java 类加载机制详解
  11. 从spring管理的datasource中获取connection
  12. linux mysql 5.0.45_linux 下安装mysql-5.0.45.tar.gz
  13. JavaScript 三种创建对象的方法
  14. web@css盒模型详解
  15. LINUX无法定位软件包
  16. 图片转化成矩阵,灰度处理,黑白对调--ByMatlab
  17. Kubernetes PV与PVC
  18. TLR4助力攻克脑血管难题 | MedChemExpress
  19. C#程序打印AX2012的SSRS
  20. 【已解决】致命错误:Python.h:没有那个文件或目录

热门文章

  1. java计算器监听_计算器及事件监听
  2. html怎么让表格连接数据库,【前端】如何将html的table空白单元格合并?数据是循环从数据库里面读取的。...
  3. oracle中的greatest,ORACLE 内置函数之 GREATEST 和 LEAST(转)
  4. iis php 数据库乱码,如何解决php插入数据乱码问题
  5. 本地计算机端口流量,计算机和防火墙上的端口及其用途-101问题
  6. cdh用户权限_cdh设置hdfs权限
  7. 13.简述MYSQL的权限级别_MySQL权限级别
  8. rtsp服务器搭建_直播系统搭建所用到的技术原理
  9. python的模块文档_python查看模块文档
  10. webpack:js、css、es6装载与压缩配置-学习笔记