Webpack从入门到出门(8)

(如转载,请注明出处)

接下来我们看如何使我们的项目文件(template和css)中支持图片:

1. 我们需要安装两个依赖,file-loader和image-webpack-loader

npm i -D file-loader

在webpack.config.js中配置

其中test为支持的图片格式, file-loader为插件依赖, name=images/[name].[ext]是文件输出路径及文件名称.

这时我们就可以在css中给boy添加个图片背景之类的操作了.

由于我们采用了ejs模板, 在html中添加图片要遵照ejs语法,像这样:

我们可以任意配置输出路径,以及对输出图片文件名进行编码,可以这样配置: 

'file-loader?name=[hash:12].[ext]&outputPath=images/&publicPath=images/'

其中hash:12为将文件名编码为长度12, &outputPath=images/&publicPath=images/为输出路径.

2. 接下来我们安装image-webpack-loader对图片文件进行优化(即压缩图片):

npm i -D image-webpack-loader

接下来我们在webpack.config.js中进行配置:

我们也可以对image-webpack-loaderf进行自定义配置:

{

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

                use: [

                    'file-loader?name=images/[name].[ext]',

                    //you can use it like below.

                    // 'file-loader?name=[hash:12].[ext]&outputPath=images/&publicPath=images/',

                    // 'image-webpack-loader'

                    {

                        loader: 'image-webpack-loader',

                        options: {

                          mozjpeg: {

                            progressive: true,

                            quality: 65

                          },

                          // optipng.enabled: false will disable optipng

                          optipng: {

                            enabled: false,

                          },

                          pngquant: {

                            quality: '65-90',

                            speed: 4

                          },

                          gifsicle: {

                            interlaced: false,

                          },

                          // the webp option will enable WEBP

                          webp: {

                            quality: 75

                          }

                        }

                      },

            ]

            }

image-webpack-loader更多配置参见github中官方介绍.