wepack官方文档指南笔记

极简入门webpack

什么是模块？

程序员将不同的功能的程序分为不同的模块。
模块的特点： 使代码有更小的接触面，便于调试。当我们写出的模块提供可靠的抽象和封装后，使整个程序展现出清晰的架构和设计。

• webpack模块化,支持多种模块化方式:

• import语句ES2015
• require()语句CommonJS
• define和require语句AMD
• css/sass/less文件中的@import语句
• 样式url()或HTML文件<img src=>中的图片链接
  webpack通过loader来支持各种语言和预处理器的编写，那么什么是loader？会在后面介绍。

那么什么是webpack？webpack是如何工作的？

webpack像产品加工的工厂，首先入口[entry]，标识原材料相关信息。出口[output]标识产品的信息。
在产品加工的过程中需要用到的工具称为laoder,具有两个属性test该工具应用于哪些产品上，use使用什么工具。
此外还可以使用高级工具插件[plugins]解决产品生产过程中各种各样的问题，模式mode提供了不同的内置优化。

入口设置

entry:'./src/index.js',

出口设置

output:{
		filename:'bundle.js',
		path:path.resolve(__dirname,'dist')
	},

loader

url-loader和file-laoder区别：file-loader返回图片的url，url-loader分两种情况处理：1.当图片小于limit时转base64，大于limit时调用file-loader对图片进行处理。

plugins

根据文档使用了2个plugins，htmlwebpackplugin生成新的html和cleanwebpackplugin每次构建对dist文件夹进行清理。

开发

• 使用source map: 将编译后的代码映射回源代码，方便找到错误
• watch：文件更新后，代码将被重新编译,缺点需要刷新浏览器
• webpack-dev-server 能够实时重新加载
• webpack-dev-middleware 将webpack处理后的文件传递给服务器

模块热替换

最有用的功能之一，允许程序运行时更新各种模块无需进行完全刷新。

• 热模块更新
• HMR修改样式表

tree shaking

该词描述js上下文中的未引用代码。
功能：为了安全删除文件中未使用的代码。

• 将文件标记为无副作用side-effect-free
• 优点，会对bundle产生显著的体积优化。

生产环境构建

• 通过precess.env.NODE_ENV==='production’指定环境

代码分离

• 三种方式：

• 入口起点entry points, 缺点：仍会有重复。
• 防止重复：CommonsChunkPlugin
• 动态导入：包含两种方式import和require.ensure

懒加载

当用户进行某些交互时，再加载某些类库。

缓存

控制浏览器缓存数据，以及及时更新变化。
提取单独缓存文件的优点：减少向服务器获取资源，同时保证客户端服务器代码一致。
使用NamedModulesPlugin减少不必要的文件名更改。

创建library

设置output的filename，通过externals外部化lodash，否则webpack会将你的library依赖自动打包到输出库中，并支持将你的library兼容不同的环境，例如CommonJS，AMD，Nodejs等。

shimming

通过ProvidePlugin提供第三方库的名字，也可以使用该方法茅庐模块单个导出值。
支持imports-loader覆写文件中的this，通过exports-loader将一个全局变量导出为普通模块
支持通过单个文件引入polyfills。

渐进式网络应用协议

使用Workbox构建离线应用

TypeScript