相关很好的资源如下：
http://www.imooc.com/article/255554
可视化工具看插件与钩子：
https://github.com/alienzhou/webpack-internal-plugin-relation
happypack的原理解析和使用方式：https://www.jianshu.com/p/b9bf995f3712
webpack ---- 常用插件
-
适用用单页 和 多页面的插件 web-webpack-plugin.
一个很好的html-webpack-plugin替代品, 可以使 webpack 以 HTML 为入口和方便的管理多个页面。 -
webpack插件-- happypack
3.htmlwebpackincludeassetsplugin :用于HtmlWebpackPlugin生成的Html的资源的HASH值老是变化的重复工作。CopyWebpackPlugin复制文件或目录到所需地方。
4.首先，DllPlugin 与 DllReferencePlugin 可以用来预构建 vendor 包，这样只要一次预构建后没有额外的依赖变更，那么启动开发环境的速度就会显著提升。
所以实际上 DllPlugin 可以认为是只用于开发环境的。至于 CommonsChunkPlugin 则是用来把多个包中的公共依赖抽取为同一个 Chunk，这可以显著减小生产环境的尺寸。
关于二者区别，可以认为 DllPlugin 是用于提速开发环境构建速度的，而 CommonsChunkPlugin 则是用于优化包尺寸的
5.https://github.com/ant-design/babel-plugin-import ：按需引入组件的 插件。如下图。
image.png
6.html-webpack-plugin
这个插件自动生成html，特别服务于webpack打包出来的bundles。
作用于webpack每次编译出来发生变化的且带有hash值的文件，去插入html。
我们可以配置以下参数传递给 HtmlWebpackPlugin：
-
title: 用于生成的HTML文档的标题。 -
filename: 要写入HTML的文件。默认为index.html。你也可以在这里指定一个子目录（例如：assets / admin.html）。 -
template: 引入的模板文件，具体内容可以查看文档。 -
inject:true | 'head' | 'body' | false，指定引入JavaScript脚本文件，在生成的HTML中的位置。默认为 true，指JavaScript脚本文件在<body>元素中引入；head，指JavaScript脚本文件在<head>元素中引入，body与true值相同；false指只生成HTML文件，不引入任何JavaScript脚本文件。 -
favicon: 生成的HTML文件中的图标路径。 -
minify:{...} | false是否对生成的HTML文件压缩，默认为false,具体配置可查看 html-minifier -
hash:true | false，如果为true，给生成的 js 文件一个独特的 hash 值，该 hash 值是该次 webpack 编译的 hash 值,这对缓存清除非常有用。默认值为false。 -
cache:true | false， 如果为true则只编译生成更改的内容将文件,默认值为true。 -
showErrors:true | false，如果为true,则将错误内容添加到HTML中,默认值为true。 -
chunks: 指定引入的JavaScript脚本文件（例如：[ ‘bundle1’, ‘bundle2’ ]）。 -
chunksSortMode:'none' | 'auto' | 'dependency' |'manual' | {function} - default: 'auto'，对引入的chunks进行排序,具体可以查看该文档。 -
excludeChunks: 排除掉指定的JavaScript脚本文件（例如：[ ‘bundle1’, ‘bundle2’ ]）。 -
xhtml:true | false，默认值是false，如果为true,则以兼容xhtml的模式引用文件。
网友评论