初衷： 整理一些常用的loader分享给大家，方便知道在什么场景下该用什么loader。如果有大佬都懂悄悄左滑就行，不喜勿喷。 适合人群： 前端初级开发。 用途： 用于将css编译完成的样式，挂载到页面style标签上。需要注意loader执行顺序，style-loader放到…

下面是公司搭建的真实项目开发环境我提炼出来比较重要的一些知识点作为内部技术分享。 打包成功后，会在项目的根目录自动创建一个 dist 文件夹，里面的 main.js 文件就是我们打包后的文件。 注意：若不想将配置写在配置文件中，可在项目根目录创建 babel.config.js…

webpack优化方向关于webpack的优化，通常我们是划分为开发体验和输出代码质量两方面来考虑的(一）优化开发体验通常是从优化构建速度和使用体验【开发环境】缩小文件的搜索范围（loader配置in

webpack在前端化过程中十分重要，所以花了一段时间学习webpack，以及webpack4新特性，本文是按照从易到难的过程，梳理部分webpack概念，常见的loader，plugins，webpack4新特新，还有部分高级概念。 Output: 如何命名输出文件，以及输出…

-- chunk理解为“代码块”，例如node_module下的module，或者你自己import入页面的自定义js。 Originally, chunks (and modules imported inside them) were connected by a pare…

接上一讲，如果我们在preset-env设置了"useBuiltIns": "usage",那么实际上我们不去引入babel/polyfill也是可以的。因为我们在使用useBuiltIns，它会自动帮我们引入，所以这节我们直接可以写es6语法。 这个时候我们虽然实现了效果，但…

前段时间，在公司做了个 Webpack 的分享。听众40多人，感觉还不错。所以总结一下，先看一下ppt的目录： 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建…

在上两章节中我们已经介绍过了 JavaScript 打包机制 以及 webpack 所有的内置配置，但当项目业务功能达到一定规模时，默认的配置已经不足以满足开发、用户的期望，我们就需要对 webpack 配置进行优化。 如何知道具体该如何优化喃，最直观的方式是分析它的输出文件，…

这一章讲打包体积优化，这个也算是最重要的一章了，我之前可是花了很多时间去查资料怎么优化打包体积的，不同版本的webpack之间还有一些区别，所以也算踩了很多的坑，所以这一章会比较长。 可以清晰的看到antd和react-dom就占了一半多，下面来优化。 1. 修改mode 2.…