WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。并且跟具你的在项目中的各种需求，实现自动化处理，解放我们的生产力…

虽然webpack的已经升级到了webpack4，而我们目前还在使用webpack3，但其中的优化点都大同小异，升级后同样适用。性能优化初步原则减小代码量减小请求数最大化利用浏览器缓存这三条原则永远是

博主学习webpack，并不是因为项目需要，而是因为webpack现在比较流行，所以想学习一下，顺便看看对现在的项目是否有用。最后经过思考感觉对当前项目的作用并不大，不过总结了一下webpack适合使用的几个场景 1.前后端分离的项目，像vue,angular,react都采用…

随着前端应用包含的模块数量日益增长，代码打包的耗时也越来越长。公司很多项目打包耗时超过了10秒，对于一般人来说超过10秒的等待是比较难受的，虽然后续增量编辑的速度很快。于是我想结合实际开发环境提升一下首次打包的速度。 1. 实际开发环境 许多需求只涉及到js模块的修改，并不涉及…

... 它每一步大体是什么意思。 配合其官网的首页图不难理解其含义：一切文件如：JavaScript 、CSS 、 SASS 、 IMG/PNG等，在 Webpack 眼中都是一个个模块，通过对 Webpack 进行配置，对模块进行组合和打包。经过 Webpack 的处理，最终…

vue-cli是构建vue单页应用的脚手架，输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用，它使得我们的代码模块化… 作者：切图妞 原文：https://segmentfault.com/a/1190000014804

先说下我们希望达到的效果。 4、在sass中编写，按需合并。 一种是以webpack-spritesmith、postcss-sprites为代表的插件，webpack-spritesmith主要的运行方式是会预先把sprite目录中的图标拼合好，页面主要依赖生成后的雪碧图。而…

在webpack4之前，提取公共代码都是通过一个叫CommonsChunkPlugin的插件来办到的。到了4以后，内置了一个一模一样的功能，而且起了一个好听的名字叫“优化” 好了，就写到这里吧，想必大家也看累了吧，辛苦大家了，哈哈。

本系列将会从原理、开发、优化、对比四个方面给大家介绍webpack的工作流程。【默认是以webpack v3为例子】 我们可以把webpack看做一个黑盒，只要会用就可以。先来体验一次很简单的webpack打包过程 npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去…