文档章节

webpack使用的一些看法

subying
 subying
发布于 2016/05/19 23:34
字数 1052
阅读 987
收藏 8

    最近在使用webpack来作为前端开发的自动构建工具,对webpack有一些理解,这里跟大家分享一下。

    一、为什么要用webpack

    一开始是处于好奇和学习的心态,但是在了解和学习的过程中发现,作为一个前端开发,因为下面的这几点,我觉得还是很有必要的。

    1.webpack 能够把amd cmd和原生的js模块打包到一起,像这样的工具在前端混乱时代里面是一个不错的选择。

    2.webpack 能够把css image html等打包成js,就这个功能,对于实现组件化 模块化的前端开发也是一个很不错的选择,也许你会觉得很多方法都可以实现,但是我觉得没有这个那么的轻松。

    3.webpack 能够编译less sass coffee  等css js这些预编译语言,能够进行css js image压缩,生成hash值来作为版本区分,这个绝对是生产环境的好助手,因为这个解决了生产环境下代码解析、更新缓存等问题。

    4.webpack 对于reactjs的用户来说,简直是神一般的搭档,为什么?因为基于上面的三点,而且jsx的解析和es6的应用都是让你着迷的地方。

 

    二、什么时候用webpack

    webpack并不是所有的场景都适合,从资料和这段时间的摸索来看,场景的应用可以分为下面的情况:

    1.单页面应用(spa)应该是比较合适的场景,因为webpack主张把所有东西打包一起,对于一个单页面应用来说这是再合适不错了。而且你发现很多网上的关于webpack的距离基本的例子都是打包成一个文件,一个或多个入口却只有一个出口。网上的例子很多,这里就不再举例了。

    2.react相关的应用,包括reactjs、 react native这些,无论是从组件化开发,还是打包编译,webpack都是最佳的选择。

    3.移动端网页开发,用这个也是不错的选择,移动端网页开发一般偏向于简约,组件化,这个都是webpack轻松做到的,还有就是在移动端静态文件缓存比较严重,而webpack中文件添加hash的功能可以解决这个事情。

    值得注意的是:在一些中大型的电商网站,页面结构比较复杂的网站,webpack的选择需要慎重,因为考虑到版本切换、灰度发布等功能,webpack处理起来并不是那么的合适,这些情况下可以结合gulp  grunt这来来用。所以使用是要分情况的而不是一味的因为大家用而用。

 

    三、webpack 需要注意的问题

    1.webpack 能根据配置来自动加载模块,但是不能自动安装需要的模块,也不是内置了你需要的模块,比如 jsx-loader,不是内置的,webpack也不会自动帮你安装,需要你自己执行 " npm i jsx-loader " 命令来安装。

    2.webpack 目前是不能处理雪碧图的,估计是作者的初衷是打包一切,而不是分散处理。所以要处理雪碧图这样的需求要用其他的方法。

    3. webpack 在watch状态下是不能够监听新增文件的,本人用的1.13.0版本是没有实现这个功能的,如果要实现估计还是找一下其他的插件或者方法,但是针对webpack本身来说是没有这个功能的,不过可以考虑跟gulp grunt这些结合使用。

    4.webpack 在watch状态下回随着文件修改而且内存增加,这点好像是很多人都知道的,而解决的方式是用gulp来监听,不知道还有没有其他的方法,或者之后webpack会不会改善这些。

© 著作权归作者所有

subying
粉丝 22
博文 65
码字总数 35859
作品 0
广州
前端工程师
私信 提问
关于Android工程师转成vue的三两事儿(4)--webpack

 最近为了能够写一份值得参考的webpack文档,特意的去查了好多相应的书籍,博客。距离上次写的那篇文章好想也过去将近一周的时间了。我想是时候要准备下一篇文章了。不然就食言而肥了。  算...

klivitamJ
05/17
0
0
一个极简版本的 VUE SSR demo

我本人在刚开始看 VUE SSR 官方文档的时候遇到很多问题,它一开始是建立在你有一个可运行的构建环境的,所以它直接讲代码的实现,但是对于刚接触的开发者来说并没有一个运行环境,所以所有的...

wfz
2018/09/24
0
0
Webpack 4.x 配置教程

Webpack进入了 4.x 版本,紧跟着对开发者的配置能力有了一些新的要求。今天我们看一下 Webpack 4.x 下的配置工作该如何进行。 安装 webpack 和 webpack-cli 安装 npm 包,分为全局安装和本地...

fengjiangjun
06/02
0
0
webpack3新特性简介

升级到webpack3 升级到webpack3,只需要通过npm安装即可:    webpack3几乎与webpack2完美兼容,除了会影响一些插件的使用,官方给出的数据是:98%的用户升级后,没有影响webpack功能的正常...

shptc
2017/06/23
0
0
webpack从0到1超详细超基础学习教程

前言 对于webpack,自己是一个一听到webpack就头大,看着一堆不知道那是什么玩意的东西总觉得自己做好前端就行了,但是在使用vue-cli的时候总觉得要改其中的一些东西进行项目初始化的时候能够...

臭臭C
2018/05/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

js—String的一些方法

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var str="Hello boy" /** * 在底......

zhengzhixiang
2分钟前
0
0
vSphere ESXi 主机上的3种VLAN设置

VLAN - Virtual Local Area Network,虚拟局域网,能便捷地组建一个网络分组,并能提供诸多好处。VMware vSphere ESXi主机上,也可以在个层次上通过设置VLAN标签地形式来组建VLAN。从划分的层...

大别阿郎
24分钟前
2
0
elasticsearch 6.x的基本dsl语句

本文使用的谷歌浏览器插件sense,链接如下sense插件(兼容es6.x版本) 查看集群状态 http://106.12.27.130:9200/_cat/health?v 绿色-一切都很好(集群功能齐全) 黄色——所有的数据都是可用...

长恭
38分钟前
11
0
移动端的弹窗滚动禁止body滚动

本文转载于:专业的前端网站➼移动端的弹窗滚动禁止body滚动 前言 最近一个需求是弹窗展示列表,显然是需要一个滚动条的,而滚动到底部就会穿透到body滚动,而阻止默认行为是不行的,这样两个...

前端老手
今天
17
0
设计模式 建造者模式和模板方法模式扩展篇

建造者模式和模板方法模式扩展篇 UML 与抽象工厂模式比较 本模式可以看出与抽象工厂非常类似,都是产生不同的产品,怎么区分这两种设计的使用场景呢 - 建造者模式关注的是基本方法的调...

木本本
今天
23
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部