声明：本篇文章基于webpack v4.43.0，如按照文中代码执行报错，请检查依赖模块版本是否和示例代码仓库中一致。 *温馨提示：*本篇内容更偏实战，涉及大量代码，如有代码密集恐惧症的老爷，请速速离场。 在上一篇的内容中，介绍了webpack的核心概念以及常用的核心配置，并尝…

1. 核心概念 entry：入口。webpack是基于模块的，使用webpack首先需要指定模块解析入口(entry)，webpack从入口开始根据模块间依赖关系递归解析和处理所有资源文件。 output：输出。源代码经过webpack处理之后的最终产物。 loader：模块转…

上一节我们解决了工程的开发调试问题，项目的生产和开发环境也已配置完成，还约定了 Webpack 配置文件规范。但它还很粗糙，这一节我们就来一起打磨这套配置。 在之前的配置中我们使用使用 MiniCssExtractPlugin.loader 来代替 style-loader ，…

对于使用vue开发项目的FE来说,打包上线这个环节相信大家都不陌生。本文主要是介绍如何通过webpack(实践版本:webpack4.16.5)的配置来提高打包构建速度以及减小包的体积。 使用optimize-css-assets-webpack-plugin 来压缩css。在…

公司做的大部分都是后台管理项目，剔除每个项目的业务逻辑，其实都可以用通用的一套模版来做。在线预览地址 每个系统都有自己的登录登出逻辑，而我们前端所要做的其实是请求后台，拿到登录权限，带上登录权限，获取用户信息和菜单信息。 在vue项目开发当中，我们一般都是在全局路由钩子做这一系…

使用webpack4提升180%编译速度

eval模式，构建速度很快，可以得到错误在源代码中的行列，但是无法查看具体的行列信息， 因为它无法查看源代码，只能查看转换后的代码。 cheap-module-eval-source-map 和 cheap-eval-source-map 类似，但是是loader转换之前的源文…

想要学好 webpack，我们首先要了解 webpack 的机制，我们先从js加载css开始学习。 bundle 是一个立即执行函数，可以认为它是把所有模块捆绑在一起的一个巨型模块。 学习一个工具我们不仅要看懂它的配置，还要对它的原理一起了解，只有学到框架的精髓，我们才能应对如…

本篇文章解答了60多道关于webpack的问题，答案有详细有简单，时间关系，有的问题还未做出解答，后续会补上，持续更新。如果答案有不对的地方，请轻拍。 全局安装webpack，意味着webpack包被安装到npm的全局包目录里了。 本地安装webpack，webpack包被安装…