1.Plugin

(1)什么是插件(plugin)

plugin 用于扩展webpack的功能，当然loader也是变相的扩展了webpack ，但是它只专注于转化文件这一个领域，而plugin的功能更加的丰富，而不仅局限于资源的加载。

(2)如何使用插件

①　通过npm安装对应的插件。
②　用require导入插件。
③　在plugins中new插件。

2.webpack-html-plugin

(1)什么是HtmlWebpackPlugin

HtmlWebpackPlugin会在打包结束之后自动创建一个index.html, 并将打包好的JS自动引入到这个文件中。

(2)HtmlWebpackPlugin使用

https://www.webpackjs.com/plugins/html-webpack-plugin/

安装HtmlWebpackPlugin：

npm install --save-dev html-webpack-plugin

配置HtmlWebpackPlugin：

const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [new HtmlWebpackPlugin()]

(3)HtmlWebpackPlugin高级使用-打包多页应用

https://github.com/jantimon/html-webpack-plugin#configuration

默认情况下HtmlWebpackPlugin生成的html文件是一个空的文件,如果想指定生成文件中的内容可以通过配置模板的方式来实现。可以添加多个入口，多个HtmlWebpackPlugin，打包后生成多个html，并且引入不同的js.

 plugins: [new HtmlWebpackPlugin({filename: 'index.html',template: './src/index.html', //配置html模板minify: { collapseWhitespace: true }, //让html文件压缩,title: 'index',chunks: ['index'],  //引入index.js}),new HtmlWebpackPlugin({filename: 'main.html',template: './src/main.html', //配置html模板minify: { collapseWhitespace: true }, //让html文件压缩,title: 'main',chunks: ['main'],  //引入main.js
}),  
],

3.webpack-postcss

(1)什么是PostCSS

https://www.postcss.com.cn/

PostCSS和sass/less不同, 它不是CSS预处理器，PostCSS是一款使用插件去转换CSS的工具，PostCSS有许多非常好用的插件。

(2)使用PostCSS自动补全浏览器前缀

①　安装postcss-loader

npm i -D postcss-loader

②　安装需要的插件

npm i -D autoprefixer

③　配置postcss-loader
在css-loader or less-loader or sass-loader之前添加postcss-loader
④　创建postcss-loader配置文件
postcss.config.js

https://github.com/browserslist/browserslist#queries

⑤　在postcss.config.js配置文件中配置autoprefixer

module.exports = {plugins: {"autoprefixer": {"overrideBrowserslist": [// "ie >= 8", // 兼容IE7以上浏览器// "Firefox >= 3.5", // 兼容火狐版本号大于3.5浏览器// "chrome  >= 35", // 兼容谷歌版本号大于35浏览器,// "opera >= 11.5" // 兼容欧朋版本号大于11.5浏览器,"chrome  >= 36",]}}
};

(3)使用PostCSS自动将px转换成rem

https://www.npmjs.com/package/postcss-pxtorem

①　安装postcss-pxtorem

npm install postcss-pxtorem -D

②　在配置文件中配置postcss-pxtorem

module.exports = {plugins: {"autoprefixer": {"overrideBrowserslist": ["ie >= 8", // 兼容IE7以上浏览器"Firefox >= 3.5", // 兼容火狐版本号大于3.5浏览器"chrome  >= 35", // 兼容谷歌版本号大于35浏览器,"opera >= 11.5" // 兼容欧朋版本号大于11.5浏览器,]},"postcss-pxtorem": {rootValue: 100, // 根元素字体大小// propList: ['*'] // 可以从px更改到rem的属性propList: ["height"]}}
};

属性：

• rootValue (Number) ：root 元素的字体大小。
• unitPrecision (Number) ：允许REM单位增长到的十进制数。
• propList ( array ) ：可以从px更改到rem的属性。
  值需要精确匹配。使用通配符 * 启用所有属性，示例：[‘']；在单词的开头或者结尾使用。( [‘position’] 将匹配 background-position-y )；使用 与属性不匹配。! 示例：[’‘,‘letter-spacing’]!，将"非"前缀与其他前缀合并。 示例：[’',‘font*’]!。
• selectorBlackList ( array ) 要忽略和离开的选择器。
  如果值为字符串，它将检查选择器是否包含字符串。[‘body’] 将匹配 .body-class，如果值为 regexp，它将检查选择器是否匹配正则表达式。[/^body$/] 将匹配 body，但不匹配 .body。
• replace (Boolean) 替代包含rems的规则，而不是添加回退。
• mediaQuery (Boolean) 允许在媒体查询中转换 px。
• minPixelValue (Number) 设置要替换的最小像素值。

4.webpack-图片合并（postcss-sprites）

(1)将打包之后的图片合成精灵图。

(2)如何合并图片

利用postcss-sprites或者webpack-spritesmith都可以合并图片

https://www.npmjs.com/package/postcss-sprites
https://www.npmjs.com/package/webpack-spritesmith

postcss-sprites安装：

npm i postcss-sprites

配置：postcss.config.js：

"postcss-sprites": {// 告诉webpack合并之后的图片保存到什么地方spritePath: "./bundle/images",// 告诉webpack合并图片的时候如何分组groupBy: function (image) {// url: '../images/animal/animal1.png',let path = image.url.substr(0, image.url.lastIndexOf("/"));// console.log(path, "!!!!!!");let name = path.substr(path.lastIndexOf("/") + 1);// console.log(name, "!!!!!!!!");return Promise.resolve(name);},//如何过滤图片filterBy: function (image) {let path = image.url;if(!/\.png$/.test(path)){  //png类型的图片不合并return Promise.reject();}return Promise.resolve();}
}