webpack plugins webpack-html-plugin postcss

充普松

2023-12-01

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();
      }
}