插件：
一:HtmlWebpackPlugin:
这个插件的作用是依据一个简单的html模板文件，生成一个自动引用你打包后的JS文件的新html文件。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。
用法：
1.首先npm install --save-dev html-webpcak-plugin;
2.在webpack.config.js 中，先引入html-webpack-plugin;
var HtmlWebpackPlugin = require("html-webpack-plugin");
3.然后添加plugin数组；
plugin:[
new HtmlWebpackPlugin({
title:'',//设置生成的html文件的标题。如果声明了这个属性值，则在template文件中设置"<title><%= htmlWebpackPlugin.options.title %></title>",否则没什么用，即使你的模板文件中未设置 title。（暂时没发现有什么亮点之处）
filename:'main.html'，//编译后生成的文件名，默认值就是index.html,可修改为别的名字
template:'index.html', //模板文件，这里的模板类型可以是任意的模板，但是使用自定义的模板文件时，需要提前安装对应的loader,否则webpack不能正常解析。
inject: true, //默认值是true,script标签位于html文件的body底部。可选值为true|body|head|false,当值为body时，和true效果一样；当值为head时，script标签位于head标签内；当值为false时，不插入生成的js文件，只是单纯的生成一个html文件。注：当值为body/head时，为字符串。
favicon:'', //给生成的html文件生成一个favicon,值为favicon文件所在的路径。
minify:{
removeAttributeQuotes: true, //移除属性的引号
removeComments: true, //移除注释
collapseWhitespace: true //压缩空格
}，//对html文件进行压缩，minify的属性值是一个压缩选项或者是false。默认值是false,默认不对生成的html文件进行压缩。
hash: true, //给生成的js文件一个独特的hash值，该hash值是该次webpack编译的hash值。默认值为false。
cache: true, //默认值是true,只有在内容变化时才生成一个新的文件。
showErrors: true, //默认值为true,显示错误信息。
chunks:[],当有多个入口文件时，对应就会生成多个编译后的js文件。那么chunks选项就可以决定是否都使用这些生成的js文件。需要引用的都写在chunks这个数组里面，如果没有制定chunks属性，默认会全部引用。
excludeChunks:[], // chunks 是相反的，排除掉某些 js 文件。
chunksSortMode：'dependency', //这个选项决定了script标签的引用顺序，默认有四个选项，none|auto|dependency|{function}。"dependency" ，是按照不同文件的依赖关系来排序。
xhtml: false, 默认为false,如果为true,则以兼容xhtml的模式引用文件。
})
]
Hot Module Replacement：
（HMR）也是webpack里很有用的一个插件，它允许你在修改组件代码后，自动刷新实时预览修改后的效果
生产阶段优化的插件：
OccurenceOrderPlugin :为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID（内置插件）
UglifyJsPlugin：压缩JS代码；（内置插件）
ExtractTextPlugin：分离CSS和JS文件
CleanWebpackPlugin:去除因hash产生的多余文件
webpack-dev-server //启动webpack-dev-server
--progress --colors //打包进行显示颜色
--hot //开启模块热修复功能
--content-base ./dist //设置webpack-dev-server运行的根目录是 ./dist
--inline //使用inline的方式进行页面自动刷新
--quiet //控制台中不输出打包信息
--compress //开启gzip压缩
网友评论