webpack个人总结使用安装/使用注意事项

局部安装

1.避免全局安装， 如果多个项目所使用的webpack版本不一样会导致启动失败

webpack.config.js 打包入口文件entry, 打包出口文件output，

module.rules加载规则和加载器，具体配置项查看webpack下的loader

1. 静态图片文件，
2. css文件和css模块化概念（css如果打开模块化了不能直接import ‘./index.css’）
3. 字体文件（ico）

plugin 让打包更方便，在某个时刻帮你做某些事情

htmlWebpackPlugin插件在打包结束时会自动生成一个html文件， 并把打包生成的js自动引入到这个html文件中

devtool

1. source-map错误类型检查和提示（多种打包类型看文档）

DevServer 提升开发效率（不用再重新打包来更新页面的数据）

1. 通过webpack-Dev-Server插件检测代码修改，检测到直接再次打包运行来个更新页面，包括跨域、修改默认端口、启动时自动打开浏览器。

Hot Module Replacement（HMR）

1. 热模块更新 防止浏览器重新打包， 因为重新打包会把页面新加的数据删除， 例如动态添加itme然后改变颜色， 修改css后只会重新打包修改的某个css不会打包html和js，如果没有热更新 html和js和css（包括的css，js（相同方法或模块），css的同文件 ）都会相互影响

vue和react都内置了这段代码，先删掉修改的然后再重新执行（新增）一个

·························

bael-loader和@babel/core是建立webpack和babel桥梁工具并转换成抽象语法树

只是把桥梁建起来了， 并不能真正转成es5语法， 还需要

它才是真正转换es6代码的工具，详细https://www.babeljs.cn/setup#installation 做的这些只是翻译了一部分， 想特定的api是没有转化的比如promise和map... 还需要使用polyfill去转换特定的api方法

这样会把所有不支持的api都导入， 并且会增加main.js文件的大小，通过配置useBuiltIns只导入需要的api

如果开发的是一个库项目的话要使用transform runtime因为prest-env体积太大：比如我只用了String的新特性，但是我把整个包都引进来了，，这不是徒增了很多无用的代码。污染全局环境：如果你引用了 @babel/polyfill，那么像Promise这样的新类就是挂载在全局上的，这样就会污染了全局命名空间。可能在一个团建建立的项目问题不太大，但是如果你是一个工具的开发者，你把全局环境污染了，别人用你的工具，就有可能把别人给坑了。 一个解决方案就是引入transform runtime 来替代 @babel/polyfill。

第三章总结

---

---

第四章

1. tree Shaking 只打包使用到的方法， 没有使用到的方法不会打包，之支持esmodel引入的方式 （import）， build文件夹下， base是公共的配置， 然后由dev和prod使用merge进行深度合并，然后再package.json内通过start或者build命令来通过不同的dev/prod进行打包

   

2. webpack和Code Splitting代码分割

把一个大文件分割成两个， 因为浏览器可以并行加载文件

总结

---

Lazy Loading 懒加载， Chunk是什么？

1. 只在需要时候才会加载，下图通过click事件触发getComponent方法然后去加载lodash，也就是只有使用的时候才去加载， 这种就是懒加载的概念。

   

css代码分割mini-css-extract-plugin插件

webpack和浏览器缓存

Shimming的作用

js文件内引入的第三方库只能在这个文件内使用（模块化导致的） 需要配置webpack.provideplugin会自动在顶部生成import $ from jquery或者是 import _ from loadsh, 这个插件就相当于一个垫片

开发组件库/函数库打包

library配置参数支持scripti标签引入 lobraryTarget的umd支持三种引入库的方式

注册npm账号然后发布

PWA打包配置比较新的前端技术，

因为webpack配置项太多所以需要时看文档或者google，或者看网盘视频教程