Webpack 的主要对象
Webpack 里面的对象，只要是单例（或者实例数目只跟 option 挂钩），都可以定义 plugin。 compiler 一般而言，webpack 的配置文件是一个对象。但是，W…
Webpack 系列之手把手教你使用 Webpack 搭建简易的 React 开发环境
在这篇文章中我们开始利用我们之前所学搭建一个简易的React开发环境，用以巩固我们之前学习的Webpack知识。首先我们需要明确这次开发环境需要达到的效…
Webpack 打包出来的文件都是啥？
先来看看打包一个模块，打包之后的内容如下： /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var inst…
webpack 之 tree shaking
tree shaking 是由 rollup 作者提出并带火的，webpack 在版本2 的时候引入，tree shaking 属于性能优化的一种，国内通常翻译为摇树优化，tree shaking…
通过 Webpack 的 compiler 对象的 Hooks 学会编写 Webpack 插件的编写
webpack 的 Hooks Webpack 的 Compiler 对象主要有以下 Hooks： entryOption webpack 处理完 entry 配置项后触发，这是一个同步串行的 SyncBailHook …
Webpack 系列之快速入门
入口 单文件入口 指定 entry 键值 const config = { entry: './yourpath/file.js' }; module.exports = config 上面的是以下的简写： const config = …
关于 Webpack 的 chunk
chunk 可以简单理解为 code spliting 出来的包，如果代码没有 code spliting 那么基本上可以认为对应于所输出的 bundle，webpack 1.0的文档中将 chun…
Webpack Watch 简介和使用
通常当你在开发中运行 Webpack 时，你希望在 watch 模式下 。 这将 Webpack 配置为监视项目中的文件以进行更改，并在文件更改时重新编译。 换句话说，…
Webpack 日常使用与优化之 webpack.optimize.CommonsChunkPlugin 比你想的更强大／配置更复杂
请注意，本文基于 webpack >= 3.0，记录下日常使用 webpack 的一些注意点/优化点，记忆和自用更多一点，同学们谨慎阅读。 实际项目： 入口文件： ['ba…
Webpack 系列之 Webpack + xxx 配合使用
渣渣一枚，目前只能想到这些了，以后想到再补。 Webpack + Babel 在 webpack 中使用 Babel 通过使用 babel-loader 即可，babel 中的配置可以通过 opti…
Webpack 之 code spliting
code spliting 接下来说的 code spliting 都是指 dynamic imports （动态导入），不涉及如何设置多个入口起点问题 关于动态导入，有两种方法：一种是…
Webpack 的 stats 、Compilation、compiler 对象里都有啥？
最近想要了解一下 webpack 的 plugin 怎么写，于是各种文章就会告诉你想要写一个 plugin 那么你首先需要了解一下 Compilation、compiler 对象，然后 p…
Webpack 系列 关于 Webpack-dev-server 配置的点点滴滴
我们都知道 webpack-dev-server 为我们在开发的时候提供了一个服务器以便于我们的开发，我们在使用之前当然需要安装： npm i webpack webpack-dev-ser…
HappyPack 并行编译提高 Webpack 构建速度
HappyPack 通过并行转换文件使初始 webpack 构建更快。 维护模式通知 我对这个项目的兴趣正在消退，主要是因为我没有像过去那样使用 JavaScript。此外…
