随笔分类 - webpack
摘要：前言 带表达式的require语句 如果你的 require参数含有表达式(expressions)，会创建一个上下文(context)，因为在编译时(compile time)并不清楚具体是哪一个模块被导入 require("./template/" + name + ".ejs"); webpa
阅读全文
摘要：在我们用vue脚手架搭建的项目中，我们可以看到package.json中有一个字段 那么什么是browserslist？它的作用是什么？这就是本文即将叙述的，如有不对的地方，请斧正。 browserlist browserlist是一个前端项目配置工具，功能是在前端工具之间共享目标环境的浏览信息 T
阅读全文
摘要：webpack之创建library 假设我们用webpack打包一个我们编写的JavaScript库，并在项目中引用 demo 项目目录 index.js ref.json webpack.library1.js 在package.json中加入字段 执行npm run webpackLibaray
阅读全文
摘要：webpack 之code splitting code splitting方法 入口起点：使用entry配置手动地方分离代码 防止重复：使用CommonsChunkPlugin去重和分离chunk、 动态导入：通过模块的内联函数调用来分离代码 一、入口起点 示例 项目目录 a.js b.js we
阅读全文
摘要：为什么需要进行代码拆分? 随着前端代码需要处理的业务越来越繁重，我们不得不面临的问题是前端的代码体积也变得越来越庞大。这造成无论是在调试还是在上线时候都需要 花长时间等待编译完成，并且用户也不得不花额外的时间和带宽下载更大体积的脚本文件。对于性能优化来说，需要减少http请求，用webpack 进行
阅读全文
摘要：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
阅读全文
