webpack-plugins的理解

Plugin （插件）

plugin 就是对某个现有的框架进行扩展，webpack中的插件就是对webpack现有的功能进行扩展，比如打包优化，文件压缩等。

Q1: plugin 和 loader的区别？

• loader主要转换某些类型的模块，相等于一个转换器
• plugin插件是对webpack本身的扩展，是一个扩展器。

// 使用过程：
// 版权名的插件
steps1: 通过npm安装需要的插件
steps2: 在webpack.config.js中配置插件

{
  plugins: [
    new webpack.BannelPlugin('版权归xxx所有')
  ]
}

打包index.html/index.css文件的插件

这个插件用于将css和js添加到html模版中，其中template和filename会受到路径的影响，从源码中可以看出.

Template: 作用：用于定义模版文件的路径

filename: 作用：输出的HTML文件名，默认为index.html，可以直接配置带有子目录

// npm安装插件
npm install html-webpack-plugin@4.3.0 --save-dev //这个插件的功能很强大，不过这里只提及生成路径的配置。
npm install mini-css-extract-plugin@1.3.9 --save-dev //将每个JS文件中的css文件剥离出来分别打包，而这个插件不仅要在loader的时候参与编译CSS，还需要在打包的时候发挥作用，将CSS打包到相应的文件夹之中。


// webpack.config.js的配置
const path = require('path');
// 作用 ；webpack 打包html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const HTMLPlugin = new HtmlWebpackPlugin({ template: './src/index.html' });
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  // plugins 使用插件  值数组
  // 数据中元素；为配置具体使用的差劲
  plugins: [
    // 单页面配置 HTMLPlugin
    new HtmlWebpackPlugin({
      template: './index.html', // 告诉webpack 打包的html文件在哪里
      filename: 'index.html',   // 用来指定打包之后的文件名
      chunks: ['index'], // 打包后；加载对应的js文件，自动识别 js路径
      minify:{  
          //删除index.html中的注释  <!--> 其他不删除
          removeComments: true,
          //删除index.html中的空格
          collapseWhitespace: true,
          //删除各种html标签属性值的双引号
          removeAttributeQuotes:true,
      }
    })
  ],
};

压缩xxx.html文件

 plugins: [
    // 单页面配置 HTMLPlugin
    new HtmlWebpackPlugin({
      // ..... 
      minify:{  
          //删除index.html中的注释  <!--> 其他不删除
          removeComments: true,
          //删除index.html中的空格
          collapseWhitespace: true,
          //删除各种html标签属性值的双引号
          removeAttributeQuotes:true,
      }
    })
  ],

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DFs6YNV6-1621171512372)(/Users/conan_w/Desktop/img/截屏2021-03-10 下午8.20.31.png)]

// 对多个xxx.html 文件
const path = require('path');
// 作用：webpack 打包html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const HTMLPlugin = new HtmlWebpackPlugin({ template: './src/index.html' });
module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js'  // 将多个.js文件打包到一个js/文件夹里面
  },
  // plugins 使用插件  值数组
  // 数据中元素；为配置具体使用的差劲
  plugins: [
    new HtmlWebpackPlugin({
        template: './index.html',
        filename: 'html/index.html',// 设置打包后文件名
        chunks: ['index'],//  打包后；加载对应的js文件，自动识别 js路径
    }),
    new HtmlWebpackPlugin({
        template: './search.html',
        filename: 'html/search.html',
        chunks:['search']
    })
  ],
};
//打包之后如下的文件结构：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-puMBZO9D-1621171512374)(/Users/conan_w/Library/Application Support/typora-user-images/image-20210312165043366.png)]

对js进行压缩的插件(打包时候用到的)

//npm安装插件
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

// 修改webpack.config.js文件的配置
plugins: [
  /.....
  new UglifyjsWebpackPlugin({
      test: /\.js(\?.*)?$/i,
      include: /\/includes/,  // 指定一些文件中压缩指定的文件类型js 
      exclude: /\/node_module/,  // 排除一些文件夹压缩node_module
      chunkFilter: (chunk) => {  // 过滤那些需要压缩js文件
        // Exclude uglification for the `vendor` chunk
        if (chunk.name === 'vendor') {
          return false;
        }

        return true;
      },
  })
]

//npm 安装terser-webpack-plugin
npm install terser-webpack-plugin --save-dev
// 修改webpack.config.js文件的配置
plugins：[
  new TerserPlugin({
    test: /\.js(\?.*)?$/i,
    parallel: true,
  })
]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jSwGKO09-1621171512378)(/Users/conan_w/Library/Application Support/typora-user-images/image-20210312165029587.png)]

webpack4打包css并压缩xxx.css文件

// webpack 提取css到单独文件的插件(webpack4.0以上)
// npm 指令下载插件 
npm install --save-dev mini-css-extract-plugin@1.0.0
// // 配置 webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module: {
        rules: [
            {
                test:/\.css$/, // 正则匹配要识别的css
                //    use:['style-loader','css-loader'] // 此处也可以这样写
               use:[MiniCssExtractPlugin.loader,'css-loader'] // 此处也可以这样写
            }
        ]
    },
 plugins: [
        new MiniCssExtractPlugin({
              filename: "css/[name].css",//都提到dist目录下的css目录中
              chunkFilename: "[id].css"
          }),
   ]

//webpack使用optimize-css-assets-webpack-plugin压缩css文件
// npm 指令下载optimize-css-assets-webpack-plugin@2.0.0
// 记住安装style-loader/css-loader
//1.css-loader是允许在js中import一个css文件，会将css文件当成一个模块引入到js文件中。
//2.style-loader能够在需要载入的html中创建一个<style></style>标签，标签里的内容就是CSS内容。
//3.optimize-css-assets-webpack-plugin 对单独打包的css进行优化（如压缩，去重等），webpack3.0及以下版本，建议使用3.2.0版本
 npm install style-loader css-loader optimize-css-assets-webpack-plugin@2.0.0 --save-dev


// 1.普通压缩xxx.css文件
// 配置 webpack.config.js
......
const optimizeCss = require('optimize-css-assets-webpack-plugin');
......
plugins: [
    new optimizeCss()
]
......

// 2.使用cssnano配置规则
//npm 下载指令
npm install cssnano --save-dev
......
const optimizeCss = require('optimize-css-assets-webpack-plugin');
......

// 配置 webpack.config.js
plugins: [
    new optimizeCss({
            cssProcessor: require('cssnano'), //引入cssnano配置压缩选项
            cssProcessorOptions: { 
            	discardComments: { removeAll: true } 
            },
            canPrint: true //是否将插件信息打印到控制台
        })
]
......

官网详情