webpack自学笔记整理

webpack- 提升打包构建速度 HotModuleReplacement 减少代码体积 treeshaking

SourceMap 是什么？ SourceMap是生成的源文件和打包后文件一一映射的一种.map文件 打包后文件很难定位到源文件出现的问题，需要通过sourceMap与源文件建立联系，方便定位问题 咋

css处理 处理之前：Css文件被打包到js文件中，当js文件加载时创建style标签生成样式（会闪屏） 预期效果：通过link标签加载，生成单独的css文件 安装 引入 css兼容性处理 下载包 n

HtmlWebpackPlugin 作用： 简化Html文件生成，自动生成HTML文件 安装： 引入使用： 服务开发自动化 自动化打包 安装npm i webpack-dev-server -D 配置

Eslint 可组装的Javascript和JSX检查工具，可以配置rule规则 配置文件 根目录下 - .eslintrc.js 文件 基本配置 parserOptions rules 具体规则 "

修改打包输出路径 自动清空上一次内容 output输出中设置 - clean:true 字体图标 其他资源

webpack处理样式资源基础使用 webpack本不能识别样式资源，需要借助各种loader帮助webpack解析样式资源 通过main.js引入css样式文件，样式会被加入到style标签中

webpack基本使用及核心概念 1. entry（入口）：指定文件从哪个文件开始打包 2. output（输出）：文件输出路径及名称 3. loader（加载器）：webpack本身只处理js、js