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开发的重要组成部分。
使用typescript
函数化编程
*.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
常用loader
目录
其他的loader
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
多页面应用创建
其他
学习资料
LICENSE
Copyright (c) 2018-1-11 present, Zhenbang Lv