webpack使用的一些看法

2019独角兽企业重金招聘Python工程师标准>>>

    最近在使用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会不会改善这些。

转载于:https://my.oschina.net/tearlight/blog/678267