随笔分类 - webpack
摘要：1. webpack编译流程 初始化参数：从配置文件和Shell语句中读取与合并参数，得出最终的参数； 开始编译：用上一步得到的参数初始化Compiler对象，加载所有配置的插件，执行对象的run方法开始执行编译； 确定入口：根据配置中的entry找出所有的入口文件 编译模块：从入口文件出发，调用所
阅读全文
摘要：2. 预备知识 2.1 toStringTag Symbol.toStringTag 是一个内置 symbol，它通常作为对象的属性键使用，对应的属性值应该为字符串类型，这个字符串用来表示该对象的自定义类型标签，通常只有内置的 Object.prototype.toString() 方法会去读取这个
阅读全文
摘要：webpack各种优化 上一章节我们已经掌握了webpack常见的所有配置 这一节我们来看看如何实现webpack中的优化，我们先来编写最基本的webpack配置，然后依次实现各种优化！ const MiniCssExtractPlugin = require("mini-css-extract-p
阅读全文
摘要：从0搭建自己的webpack开发环境 1.什么是Webpack？ webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler),当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每
阅读全文
摘要：Webpack中必须掌握的配置 loader主要用于把模块原内容按照需求转换成新内容，可以加载非 JS 模块！通过使用不同的Loader，Webpack可以把不同的文件都转成JS文件,比如CSS、ES6/7、JSX等。 我们来看看这些我们必须掌握的loader! 1.loader的编写 1.1 lo
阅读全文
摘要：（1）整体配置 entry：配置入口文件的地址，可以是单一入口，也可以是多入口。 output：配置出口文件的地址，在webpack2.X版本后，支持多出口配置。 module：配置模块，主要是解析CSS和图片转换压缩等功能。 plugins：配置插件，根据你的需要配置不同功能的插件。 devSer
阅读全文
摘要：参见文章https://blog.csdn.net/weixin_44101052/article/details/86563917
阅读全文
摘要：注意： 1、在webpack里，所有文件都是模块 例如：JS模块 >模块化(AMD、CMD、ES6 Module、Commonjs) 关于模块化参见https://www.cnblogs.com/jianxian/p/12753375.html. 如下所示 接下来便可以导入使用 最后做下验证输出，可
阅读全文
摘要：前端模块化 模块化开发可以提高代码复用率，方便代码管理。一般来说一个文件就是一个模块，得外暴露变量或者函数。目前比较流行的模块化的规范有：AMD、CMD和CommonJs以及ES6 的 module。 AMD（Asynchronous Module Definition）CMD（Common Mod
阅读全文
摘要：在一个Node.js项目中，package.json几乎是一个必须的文件，它的主要作用就是管理项目中所使用到的外部依赖包，同时它也是npm命令的入口文件。 npm 目前支持以下几类依赖包管理： dependencies devDependencies peerDependencies optiona
阅读全文
摘要：最近Github 10周年在朋友圈里沸沸扬扬刷屏，小编在工作中却惊讶的发现不少同事对版本号中的beta和rc没有概念，使用npm install package@next时，也不清楚next代表的含义。于是，决定写一篇文章科普一下由 Github 起草的Semver(语义化版本)的相关知识。 实际案
阅读全文
摘要：（1）图片处理 首先回顾下图片引入方式 1、js创建图片引入 2、css结合背景图background-image: url('')引入 3、图片标签引入<img src="" alt="" /> 1、首先在js里创建图片插入 接着进行打包输出，测试如下 发现图片并没有被打包过来... ...，接下
阅读全文
摘要：（1）ES6语法解析转换ES5 为了方便测试，我们先将mode模式改为开发模式development，首先编写ES6语法进行相关测试 然后打包测试，发现打包后的js文件仍旧是ES6语法 接下来安装相关依赖 npm i babel-loader @babel/core @babel/preset-en
阅读全文
摘要：（1）打包后的文件分析 首先将打包后的文件进行适当删减，Ctrl+Shift+L可以同时选中所有相同结构内容 结构如下 (function(modules){ ... })( { ... } ) 分析可知本质为匿名函数即IIFE函数，执行时会传入后面函数执行符里的对象，接下来分析下传入对象 对象构成
阅读全文
摘要：Commonjs模块化打包 接下来进行打包验证 npx webpack，输出结果部分如下 然后执行测试下打包输出文件main.js，这里测试有两者方法 （1）直接使用node环境测试 node main.js （2）新建html文件，引入js脚本然后启动验证 接下来执行live-server启动，然
阅读全文
摘要：（1）版本注意 npm 5.2.0开始npm便开始携带了npx （2）npx是什么？ npx是一个工具，它是npm v5.2.0引入的一条命令（npx），是npm的一个包执行器，只要为了提高从npm注册表使用软件包的体验 。 npm使得它非常容易地安装和管理托管在注册表上的依赖项， npx使得使用C
阅读全文
摘要：（1）简介 可以做的事情 1、代码转换：将ES6转为ES5；将CSS、Less、Sass等转化为CSS； 2、文件优化：文件打包过程里压缩代码体积，合并文件 3、代码分割：公共模块的抽离、路由懒加载 4、模块合并：按照功能分类，将多个模块合并为一个模块 5、自动刷新：启动webpack服务，实现代码
阅读全文
摘要：最近在学习webpack过程中，根据官方文档推荐局部安装webpack，执行webpack -h命令出现以下提示 npm install webpack-cli -D提示在开发环境中局部安装webpack-cli成功安装webpack-cli后，运行webpack -h还是提示 说明webpack命
阅读全文
摘要：（1）编译ES6 测试后有问题，先继续往下 使用webpack配合babel打包编译ES6/ES7 1、Babel是应用比较广泛的编译工具 2、在webpack使用时需要借助babel-loader，之前提到过，在webpack中编译处理静态文件，都会用到loader。而babel-loader是一
阅读全文
摘要：（1）背景 作者受Google工具的模块分割 影响有了创作灵感 随着SPA的推广，前端应用复杂度快速提升。 MVC时代便有了模块化的初期思想 三大框架便将模块化概念推广普及开来。 而模块化的同时必须面对打包和相关新型语法转换的问题 上述可以看出HTML、CSS发展史，预处理语言Less、Sass等，
阅读全文
