这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
前端工程化与webpack
前端工程化
解决方案
webpack基本使用
webpack
是前端工程化的具体解决方案
主要功能
它提供了有好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大功能。注意webpack默认只能打包处理.js后缀名结尾的模块，其他的处理不了
npm install jquery -S:安装jQuery，-S的意思就是明确告诉npm，当安装完成之后，要把包及其版本号记录到dependencies中（-S=--save）
安装webpack
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
(会记录到decdependencies,开发依赖包，-D=--save-dev)
webpack中的默认约定
自定义打包的入口和出口
webpack中的插件
作用
通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。最常用间webpack 插件有如下两个: webpack-dev-server 类似于 node.js 阶段用到的 nodemon 工具 每当修改了源代码，webpack 会自动进行项目的打包和构建
html-webpack-plugin webpack 中的 HTML 插件(类似于一个模板引警插件) 可以通过此插件自定制index.html页面的内容
安装
npm install webpack-dev-server -D
webpack中的loader
调用loader加载器才可以正常打包不是以.js为后缀名结尾的模块
loader加载器作用： 协助webpack打包处理待定的文件模块
调用过程：
Source Map
whatis
SourceMap就是一个信息文件，里面存储着位置信息。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能极大地方便后期的调试
默认Source Map的问题：记录的是生成后的代码位置，会导致报错行数与源代码不符的问题。（但是可以解决！）
解决默认问题
webpack生产环境的Source Map
在生产环境下，如果省略了 devtool 选项，则最终生成的文件中不包含 Source Map。这能够防止原始代码通过 Source Map 的形式暴露给别有所图之人。
只定位行数不暴露源码
将deevtool的值设置为nosources-source-map
定位行数且暴露代码
将devtool的设置为source-map
