WebPack 是一个模块打包工具,可以使用WebPack管理模块,并分析模块间的依赖关系,
最终编绎输出模块为HTML、JavaScript、CSS以及各种静态文件
对于不同类型的资源,webpack有对应的模块加载器loader,比如说,
CSS有对应的css-loader、style-loader,
解析less的less-loader,sass的sass-loader,
JS有eslint-loader检查代码规范,
将 TypeScript 转换成 JavaScript的ts-loader,
解析ES6为ES5的babel-loader
Vue
解析.vue后缀文件的vue-loader、
解析常用图片以及音视频资源的url-loader、
解析文件的file-loader,
解析 JSON 文件的json-loader
1.代码转换：ts 编译成 js、ES6转ES5、SCSS 编译成 CSS 等
2.代码语法检测：自动检测代码是否符合语法 （eslint-loader）
3.代码分割：打包代码时,可以将代码切割成不同的chunk(块),实现按需加载降低了初始化时间,提升了首屏渲染效率
4.监测代码更新,自动编译,刷新页面，就是自动刷新
5.文件压缩：比如,打包文件会去掉代码之间的空隔
6.模块合并：一个页面可能会由多个模块组成,所以编译时会把各个模块合并成一个文件
Webpack运行在node.js环境下,它的配置文件webpack.config.js遵循CommonJS规范,最终export出一个json对象。
1、entry,指定了模块的入口,指定了打包的入口文件
2、output,配置输出文件的存放位置、文件名、文件基础路径publicPath。输出指定了打包后的文件输出路径和文件名
3、loader,加载器用于处理不同类型的文件
4、module,配置各种类型文件的解析规则,比如说.vue文件、.js文件。
5、plugins,配置扩展插件,扩展webpack的更多功能。
Webpack 会读取并解析配置文件，并根据配置生成一个Compiler对象。
Webpack根据配置中的入口文件，读取这些文件及其依赖的模块，并将它们组成一个依赖图。
然后会根据模块之间的依赖关系，递归地解析它们的依赖，直到所有的依赖都被解析完毕。
在解析依赖的过程中,会根据配置文件中的Loader规则对模块进行编译,对于不同的文件类型会使用不同的Loader来处理。
然后会根据配置中的插件，对加载的模块进行一系列的转换操作，比如压缩、合并、优化等。
最后,webpack会将所有模块转换后的代码合并成一个或多个文件，并输出到指定的输出目录中。
内置插件：
1.ProvidePlugin将指定模块暴露到全局,使用的时候就不需要再import和require
2.DefinePlugin允许在编译时将你代码中的变量替换为其他值或表达式,比如说Vue中生产、开发环境的判断,所用的process.env
3.HotModuleReplacementPlugin热更新插件,用于热更新等等
第三方插件
1.copy-webpack-plugin: 将单个文件或整个目录复制到打包后的目录
2.clean-webpack-plugin: 清除打包后的目录
3.html-webpack-plugin: 生成html文件
4.extract-text-webpack-plugin: 将css从js中抽离出来,生成单独的css文件
5.uglifyjs-webpack-plugin：压缩代码,可以去掉代码中的console.log等等
功能不同：
Loader 本质就是一个函数,对接收到的文件进行转换,比如将ts转换成js,将scss转换成css等。
Plugin 是webpack的插件,可以扩展 Webpack 的功能。
运行时机不同
loader运行在打包文件之前,对文件进行预处理；
plugins 运行在loader结束后,webpack打包的整个过程中,它是基于事件机制,
监听webpack打包过程中的某些节点,从而执行相应任务,进而改变输出。
优化分为开发环境优化和生产环境优化,我们一般针对生产环境优化
1.oneOf找到匹配配置就终止
2.给打包出来的文件名添加哈希,实现浏览器缓存文件
3.tree shaking删除没有使用到的代码
4.code split代码分割,并行执行和按需加载
5.通过cdn引入第三方资源包
6.压缩代码,mode:production下自动压缩的
7.优化图片,小图可以使用 base64 的方式写入文件