LearnWebpack-基础篇-资源打包

预备知识 npm 简单介绍 npm 是管理包的工具，package.json、package-lock.json和node_modules都是它的一部分。 其实大部分的时候我们只需要关注package

配置总结篇 前面的打包涉及的配置虽然少但是也有，初期希望大家记住常用的，也就是用的上的就学。有些配置的业务场景少，不常用，但还是需要学习一下 路径前缀 publicPath 最开始给你讲publicP

常用的插件配置 向源码暴露常量 - DefinePlugin DefinePlugin 允许在 编译时 将你代码中的变量替换为其他值或表达式。我们来看一个使用例子： 它遵守一下规则：传递给 Defin

模块解析 使用webpack订制前端开发 - webpack如何解析代码模块路径 核心的三个问题： webpack怎么找到的node_modules，如果当前目录下没有到那里去找 webpack找到了

loader配置优化 webpack每次遇到一个资源的时候就需要扫描所有的loader，查看那些loader可以处理这个资源，但是我们发现有几点可以优化： loader的匹配范围，比如node_mod

区分环境配置 之前有再webpack-config.js中写mode这个参数，但是发现其实这个mode可以被改变，比如： 这个优先级最高，其次是webpack.config.js，最后才是默认的pro

代码调试之SourceMap source map 背景和原理 为了保证上线程序安全，我们需要对程序进行打包和压缩，但是这也带来一个问题，就是混淆之后的代码难以阅读和调试，那怎么办？ 我们急需一个功能

依赖图 和 依赖清单 依赖图（Dependency Graph） Dependency Graph 插件webpack-bundle-analyzer可以支持：对从入口文件开始解析所有依赖，递归的生成

全局导出和全局导入 Modular Progress 模块化编程：Modules 简单列举一下，webpack直接支持的模块化： ECMAScript（简称ES Module） AMD CommonJ

外部扩展 和 预置依赖 External 外部扩展 当你需要在html模板文件直接引入一个JS文件的时候，但是你有希望在src源码文件可以通过import的方式引入改文件的内容，比如：jquery 假

打包js资源 前面说webpack内置js的翻译loader，但是这个翻译只有模块化的功能，无法提供代码向低版本编译： babel-loader Polyfill 向下兼容浏览器 方案 优点 缺点 b

打包数据资源 数据资源其实说到底就是把该文件转换为数据（吐给JS），能够操作的，这明显和webpack5的Asset Module不符合，聪明的你肯定想到了使用对应的loader 自定义数据toml/

打包资产模块 raw-loader 打包文件，输出文本 file-loader 打包文件，输出文件 url-loader 打包文件，输出文件DataURL 以上上过loader经常的出现在webpac

打包CSS资源 前面说过，webpack只能识别js和json作为模块，如果你在代码中引入css无法识别并报错。 配置css-loader 这里介绍CSS的loader，因为最常用： 打包发现，诶为啥

模板html文件 配置模板html HtmlWebpackPlugin 将所有的chunk 插入到 html中 options 参数配置 template 模板html（不传的话自动生成一个空的htm

入口基础打包 webpack5已经内置了非常多的loader和内置的plugins，基本做到了开箱即用： json和js直接支持模块化处理，可以使用ES Module的语法 当mode为product