极简入门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