webpack4出了以后，一些插件变化很大，和之前的版本使用方式不一样，新手入坑，本篇将介绍如何从一开始配置webpack4的开发版本，对css，js进行编译打包合并生成md5，CSS中的图片处理，js自动注入html页，删除指定文件，提取公共文件，热更新等等。 执行webpa…

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

近几年，构建对于前端开发来说是一个很重要的名词，它给前端开发注入了很大的活力，解放了很多生产力。而webpack在前端项目中起了不可小觑的作用，它可以将我们所用的各种浏览器不认识的代码比如es6，es7,sass,less等转换为浏览器认识的语言，可以对文件进行压缩合并，代码进…

在浏览器输入localhost:3000 就可以看到欢迎画面了。 我们把前端的源码放在src目录下，使用webpack打包到node的public目录下面。添加之后的目录结构为： 然后简单配置webpack入口文件和出口文件。 但是我们不能一直在src里面执行，我们要在根目录下…

Webpack 4 发布已经有一段时间了。Webpack 的版本号已经来到了 4.12.x。但因为 Webpack 官方还没有完成迁移指南，在文档层面上还有所欠缺，大部分人对升级 Webpack 还是一头雾水。 不过 Webpack 的开发团队已经写了一些零散的文章，官网上也有…

随着前端复杂度的不断提升，诞生出很多打包工具，比如最先的grunt，gulp。到后来的webpack和Parcel。但是目前很多脚手架工具，比如vue-cli已经帮我们集成了一些构建工具的使用。有的时候我们可能并不知道其内部的实现原理。其实了解这些工具的工作方式可以帮助我们更好…

对于一个网站来说打开速度是一个很重要的指标，只是大部分时间内我们的精力可能都用来对付需求了，特别是当我们做的是一些内部的项目时，我们常常的会忽略了这一方面的优化。其实要对一个页面的打开速度做出一些比较常见的优化并没有想象中的困难，本文将带你做一些既不费力也不费时间的优化操作，这…

happypack提供的loader，是对文件实际匹配的处理loader。这里happypack提供的loader与plugin的衔接匹配，则是通过id=happypack来完成。 资料:happypack原理解析-淘宝前端 将web应用依赖的基础模块抽离出来，打包到单…

You can also speed up babel-loader by as much as 2x by using the cacheDirectory option. This will cache transformations to the filesystem. …