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。

辅助开发工具

目录

• HtmlWebapckPlugin // 用webpack生成HTML文件
• WebpackDevServer // 用webpack开发时启动浏览器
• nodemon // 用监视webpack.config.js的改变

webapck优化构建输出

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

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

webpack自己的

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

• tree-shaking。require.sure或import。

webapck实现最小化构建输出

目录

• 提取构建输出文件的公共代码；webpack4.x之前版本可参考CommonsChunkPlugin篇文章，webpack4.x可参考SplitChunkPlugin这篇文章
• 可以从压缩构建输出文件（主要指css，js）。webpack4.x之前版本，webapck4.x可参考webapck4.x 压缩构建输出这篇文章；
• 优化图片大小。可参考构建多页面应用——静态资源这篇文章；
• 如果开发的应用支持网络环境，可以使用CDN。可参考引入第三方库这篇文章；
• 移除第三方库中未使用的js代码块。 可参考babel-plguin-lodash & LodashWebpackPlugin这篇文章；
• 移除项目未使用的css代码块。可参考 webapck4.x 移除构建输出的*.css文件中，未使用的css选择器 这篇文章。

开发模式与效率

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

Webpack 与 PWA

Service Workers与workbox

常用loader

目录

• css-loader & style-loader
• url-loader
• file-loader
• css扩展语言loader，如：sass, less, stylus等
• babel-loader
• postcss-loader

其他的loader

目录

• eslint-loader
• stylelint-loader
• postcss

webpack内置插件

目录

• CommonsChunkPlugin // 提取文件块中的共用代码
• UglifyjsPlugin // 压缩编译后的模块
• DllPlugin // 减少打包构建的时间
• ProvidePlugin // 可以省去import或require来引用第三方库。如jquery，loadsh。
• DefinePlugin // 定义一个全局常量，可以用来区分开发模式和生产模式。
• HotModuleRepalcementPlugin // 启用热交换

webpack4.x 改变的内置插件

目录

• SplitChunkPlugin // 提取各模块间的共用代码，它替代了CommonsChunkPlugin插件
• webpack4.x移除了UglifyJsplugin，而引入了MinChunkSizePlugin插件；

webpack 外载插件

目录

• CopyWebPackPlugin // 拷贝静态文件到构建输出的 dist/ 目录中
• clean-wepack-plugin // 当第二次执行编译输出时，若输出文件名中未带hash，默认会覆盖输出文件；反之则会生成新的文件。而是用clean-webpack-plugin则会删除上一次输出的文件，保留最新的webpack输出文件
• HtmlWebapckPlugin // 用webpack生成HTML文件
• ExtractTextWebpackPlugin // 从打包生成的js文件分理处css到单独的文件。webpack4.x之前支持
• MiniCssExtractPlugin // 从打包生成的js文件分理处css到单独的文件。webpack4.x开始支持
• webpackMerge // 合并配置项
• babel-plguin-lodash & LodashWebpackPlugin

多页面应用创建

目录

• 构建多页面应用
• 构建多页面应用——单个页面的处理
• 构建多页面应用——模板
• 构建多页面应用——静态资源
• 构建多页面应用——优化（一）
• 构建多页面应用——hash
• 构建多页面应用——优化（二）

其他

目录

• webpack4.x变化
• webpack4.x变化 二
• webapck常见使用问题

学习资料

• 深入浅出Webpack

LICENSE

MIT

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