2019-02-18 webpack入门 (中上)

webpack里东西真的很多,准确说插件很多,所以还是要在了解文档内容的同时跟着敲一遍,即使敲一遍还是不那么放心。

image.png

今天总结这些内容,如果要打包我们的代码,
首先需要管理输出产物,那也就是管理dist相关的东西。
1 多个js文件 分离入口 单独打包
通过标题很明显,我们往往需要多个入口打包,因为当一个入口时,项目过大,包就越大,这样会导致加载过慢,所以我们要选择合适的打包粒度。
2 dist最新
我们可能会舍弃一些入口和新增一下入口,如果dist里有对已删除的js的包,久而久之,dist会存在很多垃圾,所以我们需要清理/dist/
3 包与入口的同步
我们更改了一个入口名称,打包时该入口被重新打包,但是index.html里对该包的引用名称还是旧的,所以我们在这里可以使用HtmlWebpackPlugin,保持同步。
4 维持原模块对包的映射
使用Minifest可以做到
具体是因为:

当编译器(compiler)开始执行、解析和映射应用程序时,它会保留所有模块的详细要点。这个数据集合称为 "Manifest",当完成打包并发送到浏览器时,会在运行时通过 Manifest 来解析和加载模块。无论你选择哪种模块语法,那些 importrequire 语句现在都已经转换为 __webpack_require__ 方法,此方法指向模块标识符(module identifier)。通过使用 manifest 中的数据,runtime 将能够查询模块标识符,检索出背后对应的模块。

聊打包,那一定还是要利于开发,所以接下来总结如何建立一个容易开发的开发环境
1 使用source map
当打包时,往往可能会把许多文件打包到一个包里,那当其中一个文件中的某函数出错时,我们只能知道是在dist的哪个包,没有办法知道到底是这个包里的哪个源文件出错了。
所以为了清楚告诉开发者这个错误or警告到底来自哪里,使用sourceMap功能可以解决这个问题
2 开发工具
当敲下代码,保存,再npm run build,这个运行过程可以通过webpack的几个选项帮助开发者在代码有变化时自动编译,也可以屏蔽一些文件,让它在变化时不进行编译,在使用这个操作时如果再加上代码编辑器的自动保存应该可以满足基本需求了。
这里比较喜欢的是 express和webpack-dev-middleware的组合,执行相应运行指令后,可以指定端口并自定义express服务
3 模块热替换
HMR这一节我认为它应该放在开发工具里讲,但是文档里将它提出来了,大概时因为它比较重要吧。

HMR允许在运行时更新各种模块,而无需进行完全刷新。
在这里我使用到了HMR修改样式表,安装style-loader,当更新css时,这个loader会使用module.hot.accept来修补<style>标签

@all 下期再会

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 2017年12月7日更新,添加了clean-webpack-plugin,babel-env-preset,添加本...
    ZombieBrandg阅读 4,832评论 0 19
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 14,337评论 7 110
  • 写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较...
    不忘初心_9a16阅读 8,481评论 0 17
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 10,858评论 1 32
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 10,692评论 4 31

友情链接更多精彩内容