webpack

什么是webpack

webpack是一个静态模块处理器，当它处理应用程序时，它会递归地构建一个关系依赖图，其中包含应用程序需要的每个模块，然后把所有这些模块打包成一个或多个包

静态资源的合并/打包/压缩
解决加载慢，错综复杂的依赖关系

说下 webpack 的几大特色

code splitting（可以自动完成）(根据代码的分割并对文件进行分块)
loader 可以处理各种类型的静态文件，并且支持串联操作
webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移
webpack 具有 requireJs 和 browserify 的功能，但仍有很多自己的新特性
对 CommonJS 、 AMD 、ES6 的语法做了兼容
对 js、css、图片等资源文件都支持打包
串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如：提供对 CoffeeScript、ES6 的支持
有独立的配置文件 webpack.config.js
可以将代码切割成不同的 chunk，实现按需加载，降低了初始化时间
支持 SourceUrls 和 SourceMaps，易于调试
具有强大的 Plugin 接口，大多是内部插件，使用起来比较灵活
webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快

webpack优点、原理、打包的过程

优点
- 依赖管理：方便引用第三方模块、让模块更容易复用、避免全局注入导致的冲突、避免重复加载或加载不需要的模块
- 合并代码：把各个分散的模块集中打包成大文件，减少 HTTP 的请求链接数，配合 UglifyJS 可以减少、优化代码的体积
- 各路插件：babel 把 ES6+ 转译成 ES5 ，eslint 可以检查编译期的错误
原理一切皆为模块，由于 webpack 并不支持除 .js 以外的文件，从而需要使用 loader 转换成 webpack 支持的模块，plugin 用于扩展 webpack 的功能，在 webpack 构建生命周期的过程在合适的时机做了合适的事情
webpack 从构建到输出文件结果的过程
- 解析配置参数，合并从 shell 传入和 webpack.config.js 文件的配置信息，输出最终的配置信息
- 注册配置中的插件，好让插件监听 webpack 构建生命周期中的事件节点，做出对应的反应
- 解析配置文件中 entry 入口文件，并找出每个文件依赖的文件，递归下去
- 在递归每个文件的过程中，根据文件类型和配置文件中 loader 找出相对应的 loader 对文件进行转换
- 递归结束之后得到每个文件最终的结果，根据 entry 配置生成代码 chunk
- 输出所有 chunk 到文件系统

什么是entry,output

entry入口，告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/index.js
output出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist

什么是bundle,chunk,module

bundle是webpack打包出来的文件，chunk是webpack在进行模块的依赖分析的时候，代码分割出来的代码块。module是开发中的单个模块

有哪些常见的Loader？他们是解决什么问题的？

file-loader：把文件输出到一个文件夹中，在代码中通过相对URL去引用输出的文件
url-loader：和file-loader类似，但是能在文件很小的情况下以base64的方式把文件内容注入到代码中去
source-map-loader：加载额外的Source Map文件，以方便断点调试
image-loader：加载并且压缩图片文件
babel-loader：把ES6转换成ES5
css-loader：加载CSS，支持模块化、压缩、文件导入等特性
style-loader：把CSS代码注入到JavaScript中，通过DOM操作去加载CSS
eslint-loader：通过ESLint检查JavaScript代码

有哪些常见的Plugin？你用过哪些Plugin？

define-plugin:定义环境变量 (Webpack4 之后指定 mode 会自动配置)
ignore-plugin：忽略部分文件
html-webpack-plugin：简化HTML文件创建 (依赖于html-loader)
clean-webpack-plugin:目录清理
speed-measure-webpack-plugin:可以看到每个Loader和Plugin执行耗时 (整个打包耗时、每个Plugin和Loader耗时)

loader与plugin的区别

loader是使webpack拥有加载和解析非js文件的能力
plugin可以扩展webpack的功能，使得webpack更加灵活。可以在构建的过程中通过webpack的api改变输出的结果

npm&Yarn

查看下载源

yarn config get registry //默认 https://registry.yarnpkg.com

npm config get registry //默认 https://registry.npmjs.org/

修改镜像源

npm config set registry <源地址url>    //更换npm镜像源地址(全局)
yarn config set registry <源地址url>    //更换yarn镜像源地址(全局)
npm config set <某插件> <源地址url>     //仅更改某插件的npm源地址
yarn config set <某插件> <源地址url>    //仅更改某插件的yarn源地址

安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

镜像地址

npm --- https://registry.npmjs.org/
npm --- https://registry.npm.taobao.org/
yarn --- https://registry.yarnpkg.com/
yarn --- https://registry.npm.taobao.org/
cnpm --- https://r.cnpmjs.org/
cnpm --- https://registry.nlark.com/
taobao --- https://registry.npm.taobao.org/
nj --- https://registry.nodejitsu.com/
rednpm --- https://registry.mirror.cqupt.edu.cn/
npmMirror --- https://skimdb.npmjs.com/registry/
deunpm --- http://registry.enpmjs.org/

← Vuex Axios →