使用webpack时不加载PNG

可以通过以下几种方式实现：

使用file-loader或url-loader：file-loader和url-loader是webpack的两个常用加载器，可以用于处理各种文件类型。在webpack配置文件中，可以配置这两个加载器来处理PNG文件。file-loader会将PNG文件复制到输出目录，并返回文件路径，而url-loader可以将PNG文件转换为base64编码的字符串，以减少HTTP请求。具体配置如下：

module.exports = {

 module: {

   rules: [

       test: /\.png$/,

       use: [

           loader: 'file-loader',

           options: {

             name: '[name].[ext]',

             outputPath: 'images/'

};

或者

module.exports = {

 module: {

   rules: [

       test: /\.png$/,

       use: [

           loader: 'url-loader',

           options: {

             limit: 8192,

             name: '[name].[ext]',

             outputPath: 'images/'

};

这样配置后，在代码中引用PNG文件时，webpack会自动处理并将其复制到输出目录。

使用image-webpack-loader：image-webpack-loader是一个用于压缩和优化图片的webpack加载器。通过配置image-webpack-loader，可以在构建过程中对PNG文件进行压缩和优化，从而减小文件大小。具体配置如下：

module.exports = {

 module: {

   rules: [

       test: /\.png$/,

       use: [

         'file-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

};

这样配置后，image-webpack-loader会在构建过程中对PNG文件进行压缩和优化。

使用webpack插件：除了加载器，webpack还支持使用插件来处理文件。可以使用CopyWebpackPlugin插件将PNG文件复制到输出目录，或使用imagemin-webpack-plugin插件对PNG文件进行压缩和优化。具体配置如下：

const CopyWebpackPlugin = require('copy-webpack-plugin');

const ImageminPlugin = require('imagemin-webpack-plugin').default;

module.exports = {

 plugins: [

   new CopyWebpackPlugin({

     patterns: [

         from: 'src/images/*.png',

         to: 'images/[name].[ext]'

}),

   new ImageminPlugin({

     test: /\.(jpe?g|png|gif|svg)$/i

})

};

这样配置后，CopyWebpackPlugin会将PNG文件复制到输出目录，而ImageminPlugin会对PNG文件进行压缩和优化。

以上是使用webpack时不加载PNG的几种方式，具体选择哪种方式取决于项目需求和个人偏好。

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云