webpack-play

webpack-play copied to clipboard

webpack-play

注：webapck的生态圈很大，也很完善，但正因为大，而让人变得无所适从。webpack-play让使用webapck变得轻松起来。不夸张的说，webapck可以处理你开发中的所有问题。

初探

webpack 入门可以让你快速的上手webapck。

需要webapck做什么工作？

处理css文件块

要实现css代码以内联的方式被*.html文件引用。可参考css-loader & style-loader]；

要实现css代码被分为独立的文件，可以通过<link>元素被*.html文件引用。可参考ExtractTextWebpackPlugin。

处理图片和字体

url-loader可以解决图片或字体是被合并到构建输出的文件中，还是分离出来。但它只能处理url()；如果要处理<img src="...">，可参考CopyWebPackPlugin。

使用js新特性

babel-loader可以满足你的需求，同时满足浏览器的兼容需求。

规范开发中的代码

如果是js代码，可以参考 eslint-loader与Javascript语法检测 `这篇文章；

如果是css代码，可参考 stylelint-loader与css语法检测 `这篇文章。

进阶

两前端个技术生态

css和js作为web开发的重要组成部分。

• 有一个babel可以实现ES（JavaScript标准）新语法特性转换到指定语法特性；可参考babel这篇文章。
• 有一个postCss也可以实现css样式的转换。可参考postcss

注：babel handbook

使用typescript

• 限制javascript的灵活性(数据类型)，从避免错误。参考文档，demo

函数化编程

*.js模块的函数化编程

我们所熟知的是函数化编程可以极大程度的缩减JavaScript代码量。

css的函数化编程

如果css也能实现函数化编程，那么css的代码量也将急剧减小，sass、stylus等css扩展语言成为了首选。可参考css-extend这篇文章。

html的函数化编程

一致比较流行的是*.ejs，*.pug。我个人常用的是pug，参考示例webpack4.x-multi-page。

webpack的函数化编程

可参考webpack4-demo。

辅助开发工具

webapck优化构建输出

当你需要对构建输出的大小进行优化时，可以从如下两个方面入手：

• 构建输出都包含哪些文件，这些文件都使用了哪些源文件；可参考webpack-bundle-analysis
• 针对不同的类型的文件，可以使用哪些技术。可参考webapck实现最小化构建输出部分的描述。

webpack自己的

• 代码分离。可参考code-splitting

• tree-shaking。require.sure或import。

webapck实现最小化构建输出

开发模式与效率

• 判断是那种开发模式——环境变量

Webpack 与 PWA

Service Workers与workbox

常用loader

其他的loader

webpack内置插件

webpack4.x 改变的内置插件

webpack 外载插件

多页面应用创建

其他

学习资料

• 深入浅出Webpack

LICENSE

MIT

Copyright (c) 2018-1-11 present, Zhenbang Lv