Webpack常用插件

2022-07-17 06:31:48

2024-11-21 07:43:50

压缩图片

安装命令

shell 复制代码

cnpm i -D image-webpack-loader

webpack.config.js

js 复制代码

    module: {
        rules: [
            //图片文件
            {
                test: /\.(bmp|png|jpg|jpeg|ico|gif|webp|svg)$/,
                use: [{
                        loader: 'file-loader',
                        options: {
                            limit: 1, // 当图片小于1 k时 自动用base64转换
                            name: '[name].[ext]',
                            // 图片输出的实际路径(相对于dist)
                            outputPath: 'images',
                            publicPath: './images'
                            //publicPath: 'https://cdn2020.xiaolong0418.com/navigation/images'
                        }
                    },
                    /*对图片进行压缩*/
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            // 压缩 jpeg 的配置
                            mozjpeg: {
                                progressive: true,
                                quality: 65
                            },
                            // 使用 imagemin-optipng 压缩 png，enabled: false 为关闭
                            optipng: {
                                enabled: false,
                            },
                            // 使用 imagemin-pngquant 压缩 png
                            pngquant: {
                                quality: [0.65, 0.90],
                                speed: 4
                            },
                            // 压缩 gif 的配置
                            gifsicle: {
                                interlaced: false,
                            },
                            // 开启 webp，会把 jpg 和 png 图片压缩为 webp 格式,建议不要开启，ios14以下系统不支持webp
                            // webp: {
                            //   quality: 75
                            // }
                        }
                    }
                ]
            }
        ]
    },

vue.config.js

js 复制代码

module.exports = {
  chainWebpack: (config) => {
    if (IS_PROD) {
      config.module
        .rule('images')
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
          mozjpeg: { progressive: true, quality: 65 },
          optipng: { enabled: false },
          pngquant: { quality: [0.65, 0.9], speed: 4 },
          gifsicle: { interlaced: false },
          // webp: { quality: 75 }
        });
    }
  },
};

常见问题

1、缺少依赖

使用 cnpm 安装依赖

2、在某些版本的 OSX 上安装可能会因 libpng 依赖项而引发错误。可以通过安装最新版本的 libpng 来解决。

shell 复制代码

brew install libpng

自动打包成zip压缩包

安装命令

shell 复制代码

npm i filemanager-webpack-plugin -D

webpack.config.js

js 复制代码

const FileManagerPlugin = require('filemanager-webpack-plugin');
module: {
        ...
    // 打包生成dist.zip
    new FileManagerPlugin({
      events: {
        onEnd: {
          delete: ["./dist/dist.zip"],
          archive: [{ source: "./dist", destination: "./dist/dist.zip" }],
        },
      },
    }),
},

自动添加版权

webpack.config.js

js 复制代码

const webpack = require('webpack');

module.exports = {
  //添加版权
  plugins: [
    new webpack.BannerPlugin(
      '最终版权归`浪里小白龙`所有,如有需求，请联系微信：xiaobailong0418'
    ),
  ],
};

vue.config.js

js 复制代码

const webpack = require('webpack');

module.exports = {
  //添加版权
  configureWebpack: (config) => {
    if (process.env.NODE_ENV !== 'production') return;
    return {
      plugins: [
        new webpack.BannerPlugin(
          '最终版权归`浪里小白龙`所有,如有需求，请联系微信：xiaobailong0418'
        ),
      ],
    };
  },
}

运营需要亿点资金维持，您的支持，是小白龙创作的动力！！！

暂无评论，欢迎留下你的评论