10月28, 2018

webpack img图片处理

先说个其他的事,昨天晚上翻之前的博客,发现七牛有些图片用不了,查了一下才知道它的测试域名会过期。。。真是日了狗了,不知道有没有办法说每个月支付点钱,能一直使用,MS没有找到这种入口。最蛋疼的是我的这个域名是不需要备案,它就必须要提供备案通过的域名。

哎~~我MS有80来张图,是放在七牛上面的,到时候得想个方案搞下来了,想想真TM忧伤,对七牛无感了。

之前的项目,图片等资源都是用的绝对路径,像这样的/assets/xxx,然后阿里的人在server.js里面加了这两句话:

// 静态资源文件的路径
const staticDirMappings = {
  '/assets/fonts': 'its-components/style/assets/fonts',
  '/assets/itsc': 'its-components/style/assets',
  '/assets/flash': 'src/assets/flash',
  '/assets/images/': 'src/assets/images',
  ...projConfig.staticDirMappings
};

// 静态目录服务(图片,字体等)
Object.keys(staticDirMappings).forEach((remotePath) => {
  const localPath = staticDirMappings[remotePath];
  server.app.use(remotePath, express.static(path.join(PROJ, localPath), {
    fallthrough: false
  }));
});

然而这样写的问题在于,最终打包的时候,需要copy整个资源到dist目录。

而其实我们更倾向于使用webpack来管理资源,这样的话,其实打出来的文件才可能是最少的(上面的方案很容易出现冗余)。

解决的方案其实很简单,就是别名机制。

{
     alias: {
           ...,
           assets: path.resolve(PROJ, 'src/assets')
     }
}

html的image处理

这个需要借助html-loader

{
    // 匹配.html文件
    test: /\.html$/,
    use: [
      {
        loader: 'html-loader',
        options: {
          attrs: ['img:src', 'link:href'],
        },
      },
    ],
    exclude: /^node_modules$/,
},

然后我们就可以在img那里使用:

<img src="~assets/xxx.png" />

需要注意的是,现在我们都会使用2倍图、3倍图,写法如下:

<img src="/assets/images/index_login_type.png" srcset="/assets/images/index_login_type@2x.png 2x, /assets/images/index_login_type@3x.png 3x"/>

所以在optionsattrs,还得加上img:srcset

上面的写法有问题,会导致webpack编译报错,最终网上找了一个靠谱的方案,用html-srcsets-loader代替html-loader

Webpack: html-loader not resolving srcset images

{
    test: /\.html$/,
    loader: 'html-loader',
    options: {
        attrs: ['img:src', 'img:srcset'],
        minimize: true,
        caseSensitive: true,
        removeAttributeQuotes:false,
        minifyJS:false,
        minifyCSS:false
    }
}

css的image处理

和上面一样,只要将background url或者字体资源之前的/assets/xxx,改为~assets/xxx,即可。

这里补充一个知识点,就是背景图也是有2倍图和3倍图的,写法是image-set,相应的语法自行百度吧。

然而真的好了么?

不!!这里TMD有一个大坑,就是假如你用了css module

"css-loader?modules&localIdentName=[local]"

alt

好了,死活不行,我查了很久。发现在github上也有这样的一个issue:Using webpack resolve.alias

aliases break as soon as you try to use composes with an external module

js的image处理

这个MS没有人不清楚吧?使用require即可。

结语

如果真要用css module,我觉得可以换个方案,比如说用scope的这种(不确定能否行的通)。

莫名忧伤!!

本文链接:www.my-fe.pub/post/wepack-img-handle.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。