webpack里东西真的很多,准确说插件很多,所以还是要在了解文档内容的同时跟着敲一遍,即使敲一遍还是不那么放心。
今天总结这些内容,如果要打包我们的代码,
首先需要管理输出产物,那也就是管理dist相关的东西。
1 多个js文件 分离入口 单独打包
通过标题很明显,我们往往需要多个入口打包,因为当一个入口时,项目过大,包就越大,这样会导致加载过慢,所以我们要选择合适的打包粒度。
2 dist最新
我们可能会舍弃一些入口和新增一下入口,如果dist里有对已删除的js的包,久而久之,dist会存在很多垃圾,所以我们需要清理/dist/
3 包与入口的同步
我们更改了一个入口名称,打包时该入口被重新打包,但是index.html里对该包的引用名称还是旧的,所以我们在这里可以使用HtmlWebpackPlugin,保持同步。
4 维持原模块对包的映射
使用Minifest可以做到
具体是因为:
当编译器(compiler)开始执行、解析和映射应用程序时,它会保留所有模块的详细要点。这个数据集合称为 "Manifest",当完成打包并发送到浏览器时,会在运行时通过 Manifest 来解析和加载模块。无论你选择哪种模块语法,那些
import
或require
语句现在都已经转换为__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 下期再会