webyouxuan的博客

上期文章：前端自动化测试 又一个连载来啦！这次我们将分四篇文章来介绍如何从0构建一个webpack开发环境，了解其内部机制和原理，从而让我们更准确的掌握和使用webpack，下面开始我们的起步： 1.什么是Webpack? webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(de...

上期回顾：从0搭建自己的webpack开发环境（一） loader主要是用于把模块原内容按照需求转换成新内容，以便用来加载非 JS 模块！ 通过使用不同的loader，Webpack可以把不同的文件都转成JS文件，比如CSS、ES6/7、JSX等。 让我们来看看这些必须要掌握的loader! 1.loader的编写 1.1 loader的使用 test：匹配处理文件的扩展名的正则表达式 us...

往期回顾： 从0搭建自己的webpack开发环境（一） 从0搭建自己的webpack开发环境（二） 1.处理JS模块 1.1 将es6代码编译成es5代码 代码的转化工作要交给babel来处理 npm install @babel/core @babel/preset-env babel-loader --save-dev @babel/core是babel中的核心模块，@babel/prese...

往期回顾： 从0搭建自己的webpack开发环境（一） 从0搭建自己的webpack开发环境（二） 从0搭建自己的webpack开发环境（三） 经过三期的学习，本篇文章将介绍TS和React/Vue的结合使用，搭载Webpack，助力成长前端高级技术体系。下面继续一起学习： 1.配置TS环境 1.1 使用ts-loader 使用typescript需要安装ts相关配置 npm install ty...

往期回顾： 从0搭建自己的webpack开发环境（一） 从0搭建自己的webpack开发环境（二） 从0搭建自己的webpack开发环境（三） 从0搭建自己的webpack开发环境（四） 前四篇文章我们已经掌握了webpack各种常见的配置，这一片文章我们来看看如何实现webpack中的优化。 我们先来编写最基本的webpack配置，然后依次实现其中的各种优化。 const MiniCssExtr...