2017-08-10读书笔记（Webpack学习笔记6）

今天继续学习Webpack技术。

文章是这篇 入门Webpack，看这篇就够了

css预处理器相关组件常用的是以下三个，less-loader、sass-loader、stylus-loader。还有一个css的相关组件是PostCSS，可以自动补齐所有浏览器前缀。

话说这边的PostCSS的demo跑不通。上网百度了也没有结果，算了之后自己深入学习的时候再慢慢研究吧，到时候再过来修改。

Plugins是插件，与loader不同，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。

常用插件
HtmlWebpackPlugin：这个插件的作用是依据一个简单的模板，帮你生成最终的Html5文件，这个文件中自动引用了你打包后的JS文件。每次编译都在文件名中插入一个不同的哈希值。
Hot Module Replacement：热更新。Hot Module Replacement（HMR）也是webpack里很有用的一个插件，它允许你在修改组件代码后，自动刷新实时预览修改后的效果。

话说，原文在这里说应该已经有了热更新的效果，但是我这边依然还是需要专门构建一次才能更新，不知道原因是什么。之后再慢慢研究。

优化插件
OccurenceOrderPlugin：为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
UglifyJsPlugin：压缩JS代码；
ExtractTextPlugin：分离CSS和JS文件

OccurenceOrder 和 UglifyJS plugins 都是内置插件，你需要做的只是安装它们

缓存
缓存无处不在，使用缓存的最好方法是保证你的文件名和文件内容是匹配的（内容改变，名称相应改变）
webpack可以把一个哈希值添加到打包的文件名中，使用方法如下,添加特殊的字符串混合体（[name], [id] and [hash]）到输出文件名前
new ExtractTextPlugin("[name]-[hash].css")

文章暂时看完了，在这篇文章的开始其实就已经demo进行不下去了，看来还是没有看文档的关系另外看到了评论区写了很多webpack，webpack2，webpack3。看样子还是需要先去了解一下啊。

这篇文章的学习先到这边了。