摘要：
webpack 生产环境构建 背景 在项目开发的时候，我们通常会将程序分为开发环境和生产环境，开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置，也就是方便我们开发人员调试开发的一种环境；生产环境通常 是指我们将程序开发完成后经过测试之后无明显异常准备发布上线的环境，也就是用户可以正常使用 阅读全文
摘要：
什么是tree shaking？ 前端中的tree shaking可以理解为通过工具"摇"我们的js文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在webpack项目中， 有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖啦某个模块，但 阅读全文
摘要：
HMR 什么是HMR? Hot Module Replacement(HMR),当你对代码进行修改并保存后，webpack将对代码重新打包，并将模块发送到浏览器端，浏览器通过新的模块替代老的模块， 这样在不刷新浏览器的前提下就能够对应用进行更新。HMR 模块热替换功能会在应用程序运行过程中替换、添加 阅读全文
摘要：
webpack dev middleware 什么是webpack dev middleware webpack dev middleware是一个容器(wrapper)，它可以把webpack处理后的文件传递给一个服务器(server)。webpack dev middleware就是expres 阅读全文
摘要：
在webpack的构建过程中我们需要用到一些基本构建开发工具来提升我们的工作效益 webpack常用开发工具模块 source map 自动追踪代码错误所在的文件 webpack watch 观察者模式自动编译 webpack dev server 指定目录启动本地服务 webpack dev mi 阅读全文
摘要：
webpack dev server 什么是webpack dev server？ webpack dev server是webpack官方提供的一个小型Express服务器。 通过配置它可以在开发模式下为webpack打包生成的静态资源文件启动一个web服务器，并检测代码的进行实时更新 webpa 阅读全文
摘要：
webpack管理输出 output output配置如何输出最终想要的代码，output是一个object里面包含一系列配置 filename output.filename配置输出文件的名称，为string类型，如果只有一个输出文件，我们可以将它写成静态不变的 filename:"bundle. 阅读全文
摘要：
webpack管理资源 webpack并不能处理js以外的静态资源，可以痛过loader来解决这一问题 loader loader用于对模块的源代码进行转换。loader可以使你在import或加载模块时候，预处理文件。因此loader类似于其他构件工具中"任务"，病提供了处理前端构件步骤的强大方法 阅读全文
摘要：
在webpack中使用配置文件 如果不想在终端中输入命令行，就可以创建一个可以取代CLI的配置文件 接上一篇文章 "webpack起步" 1. 在todo目录下新建文件并命名webpack.config.js 2. 在webpack.config.js里编写以下内容 3.在终端执行npx webpa 阅读全文
摘要：
webpack起步 准备 1. 安装nodejs 2. 新建文件夹并并命名为todo; 3. 进入到todo文件目录下 4. npm init y(npm初始化，在init的时候省去了敲回车的步骤，生成默认的packge.json) 5. 安装webpack，webpack cli(npm i sa 阅读全文