webpack-china / awesome-webpack-cn Goto Github PK

里面包含一些常见的知识点，以及误区

简述

webpack 2 与 rollup 的 tree-shaking 的实现都是因为 ES6 module 的静态特性才得以实现。

webpack 2 默认是支持 tree-shaking，但由于现有的 production 环境，不得不使用 babel 语法转换器，在配置 .babelrc 时，跟 webpack 1 还是有所差别。

此项目只是对 webpack tree-shaking 技术的验证实验。

结论

• webpack 2 默认是支持 tree-shaking

• babel 配置没做特殊处理，是无法实现 tree shaking

• transform-es2015-modules-commonjs 插件影响 tree shaking 的实现

• 通过UglifyJs简单的代码压缩，过滤掉无用 DCE(无用代码消除)

• 只有es6模块才能使用webpack2做静态依赖解析

仓库地址：
https://github.com/Jschyz/webpack-tree-shaking

推荐一篇个人觉得不错的webpack4.x入门学习教程。如果觉得不错，希望可以收录一下，谢谢！
文章地址：https://www.jianshu.com/p/991e1067eee0

https://github.com/davezuko/react-redux-starter-kit
这个是webpack & react中的 bodyno的脚手架，copy过来的，希望能更正下原作者的地址

• Webpack 中文指南

Webpack模块化runtime解析（8千字长文！！） 个人比较认为比较不错的。能够明白webpack做了什么样的工作而且代码也容易读懂