美文网首页
Webpack从入门到出门(8)

Webpack从入门到出门(8)

作者: RZsnail | 来源:发表于2018-01-21 17:11 被阅读0次

    (如转载,请注明出处)

    接下来我们看如何使我们的项目文件(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中官方介绍.

    相关文章

      网友评论

          本文标题:Webpack从入门到出门(8)

          本文链接:https://www.haomeiwen.com/subject/tdgfaxtx.html