webpack2 前篇

#webpack

前两天用了一天半时间琢磨了下webpack2,想起去年这时候,面对webpack1那样恶心的文档,前前后后搞了好几次才摸索清楚,那真是吐了。

划重点

其实webpack2这样的工具吧,说复杂不复杂,就是我们的思路一定要清晰,第一天我从早上9点搞到了晚上大概8-9点吧。下午一段时间基本是断片的。本文呢主要还是想跟大家分享下思路和心理历程。

不管你做啥对吧,尤其是写程序,更尤其是复杂的时候。理清思路最为关键,为啥有一段时间我断片了呢?就是思路没了,那几个小时就从把逻辑转换为代码的过程变为了写一行测是一行碰运气的过程

做什么

所以我们先来看看,webpack2要为我们做什么?(本次以vue为例,react换下对应的dependencies就好,react在webpack官网文档上都有配置就不说了)

Dev

1.hot-reload 编译.vue

2.编译sass和es6

3.sourceMap

4.eslint

5.环境变量设置

6.输出错误提示在浏览器上

Build

1.rm dist文件夹并且重新生成

2.文件hash

3.cdn链接补全

4.分离css文件

5.sourceMap

列好了后,我们就可以一个一个突破,首先我们从dev下入手,webpack的dev其实是很好配置的,麻烦得就是Build的切换。

webpack的3个文件

我们知道一般要分webpack.devwebpack.prowebpack.base为什么要这样呢?

在我们dev环境下或者是build环境,我们的output、rules、plugin都会很不同!如果写在一起文件会很乱逻辑非常难看懂。这也是为什么vue-cli的build文件夹有那么多个文件的原因。(不得不吐槽下,去年说什么webpack配置比gulp更简单清晰的人不知道怎么想的,明显复杂度不是一个级别了)

下回预告

好像没有什么可以跟你们瞎BB的了。这次过程中我主要实现了两套webpack的配置,我个人认为一种是基础低配版,另一种是标准高配版(基本实现了一个简易的vue-cli配置)。下篇让我们再细说具体配置:)

webpack2 前篇的更多相关文章

  1. VS2010+MVC4+Spring.NET2+NHibernate4-传统三层架构-前篇

    VS2010+MVC4+Spring.NET2+NHibernate4 - 传统三层架构 - 前篇 一直追求使用开源项目,就因一个字:懒! 一直想整理一下的,却一直懒到现在!从当初用的MVC3到现在的 ...

  2. 【翻译】西川善司「实验做出的游戏图形」「GUILTY GEAR Xrd -SIGN-」中实现的「纯卡通动画的实时3D图形」的秘密,前篇(2)

    Lighting和Shading(2)镜面反射的控制和模拟次级表面散射技术 http://www.4gamer.net/games/216/G021678/20140703095/index_2.ht ...

  3. ASP.NET自定义控件组件开发 第三章 为控件添加事件 前篇

    原文:ASP.NET自定义控件组件开发 第三章 为控件添加事件 前篇 第三章 为控件添加事件 好了,我们之前以前开发一个控件.而且也添加了属性,开发也很规范,但是那个控件还差最后一点:添加事件. 系列 ...

  4. 【原创】构建高性能ASP.NET站点 第六章—性能瓶颈诊断与初步调优(下前篇)—简单的优化措施

    原文:[原创]构建高性能ASP.NET站点 第六章-性能瓶颈诊断与初步调优(下前篇)-简单的优化措施 构建高性能ASP.NET站点 第六章—性能瓶颈诊断与初步调优(下前篇)—简单的优化措施 前言:本篇 ...

  5. [原创].NET 分布式架构开发实战之四 构建从理想和实现之间的桥梁(前篇)

    原文:[原创].NET 分布式架构开发实战之四 构建从理想和实现之间的桥梁(前篇) .NET 分布式架构开发实战之四 构建从理想和实现之间的桥梁(前篇) 前言:上一篇文章讲述了一些实现DAL的理论,本 ...

  6. 文本分类需要CNN?No!fastText完美解决你的需求(前篇)

    http://blog.csdn.net/weixin_36604953/article/details/78195462?locationNum=8&fps=1 文本分类需要CNN?No!f ...

  7. Android深入四大组件(四)Android8.0 根Activity启动过程(前篇)

    前言 在几个月前我写了Android深入四大组件(一)应用程序启动过程(前篇)和Android深入四大组件(一)应用程序启动过程(后篇)这两篇文章,它们都是基于Android 7.0,当我开始阅读An ...

  8. 一点一点看JDK源码(六)java.util.LinkedList前篇之链表概要

    一点一点看JDK源码(六)java.util.LinkedList前篇之链表概要 liuyuhang原创,未经允许禁止转载 本文举例使用的是JDK8的API 目录:一点一点看JDK源码(〇) 1.什么 ...

  9. 【Java集合】LinkedList详解前篇

    [Java集合]LinkedList详解前篇 一.背景 最近在看一本<Redis深度历险>的书籍,书中第二节讲了Redis的5种数据结构,其中看到redis的list结构时,作者提到red ...

随机推荐

  1. 使用 bufferedreader 的好处

    简单的说,一次IO操作,读取一个字节也是读取,读取8k个字节也是读取,两者花费时间相差不多.而一次IO的来回操作却要耗费大量时间.好比是一辆大型汽车(设装100人),要去车站接人到公司,接一个人也是接 ...

  2. [0] 分析 EntityName 时出错。 行 2,位置 *。

    1. 报错内容“若要在加载设计器前避免可能发生的数据丢失,必须纠正以下错误: ”   “分析 EntityName 时出错. 行 2,位置 *.” 2. 如图: 3. 解决方案:查看项目全路径,是否有 ...

  3. 微信小程序 - 自定义创建

    自定义创建与默认创建完全相同, 只是不要勾选quick start即可 淡定(不要看到报错就紧张, 一定要淡定) 看看它说了什么, no such file or directory(没有文件或目录) ...

  4. 总结·CSS3中定位模型之position属性的使用方法

    一.position元素介绍 position属性规定了元素的定位类型,通过定位,可准确地定义元素相对于其正常位置而应该出现的位置,或者是相对于父元素.另一元素和浏览器窗口等的位置. position ...

  5. ui-router 父子state共享数据

    如果ui-view是嵌套的,那么在子view中,可以直接引用 $scope.$parent 即可.

  6. Socket实现

    网络实现架构 4.4BSD通过同时对多种通信协议的支持来提供通用的底层基础服务.4.4BSD支持四种不同的通信协议簇: TCP/IP(互联网协议簇) XNS(Xerox网络系统) OSI协议 Unix ...

  7. 小程序之发起请求 wx.request(object)的坑

    这是官方的API,然后官方的实例中 wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { ...

  8. PHP加密字符串函数(Discuz内置的)

    接触Discuz有一段时间了,一直很喜欢这个论坛程序,确实是一个很不错的程序,灰常值得我们去学习,这里介绍它其中的一个加密函数(含解密)这个加密函数的特点在于,比普通的加密函数多了一个随机密钥 ,可以 ...

  9. 导出CSV表格数据

    <?php class Csv{ //导出csv文件 public function put_csv($list,$title){ $file_name="CSV".date ...

  10. php session_start()报错 解决办法

    1.php.ini中的output_buffering=off 改成output_buffering=4096 2.php.ini中的session.save_path是否设置好了 3.php.ini ...