wepack官方文档指南笔记

wepack官方文档指南笔记

极简入门webpack

什么是模块？

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

webpack模块化,支持多种模块化方式:import语句​​ES2015​​require()语句​​CommonJS​​define和require语句​​AMD​​css/sass/less文件中的@import语句样式url()或HTML文件中的图片链接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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。