图片处理

引入

使用file-loader可以从 js 中引入图片资源，注意loader的option， 图片的路径相关配置

  • pulicPath

  • outputPath

  • useRelativePaht


如果要处理图片的大小处理，可以将图片使用url-loader处理为base64位,通过适用url-loader，options的limit，对图片的大小进行过滤

压缩

使用 img-loader来压缩图片,具体配置项目可以参考文档

雪碧图

在postcss-loader中可以使用插件，来将小图合并成大图。
require(‘postcss-sprites’)({
spritePath:’dist/asssets/imgs/‘
)
如何适配高清图表，postcss可以处理retia屏幕配置高清屏幕

字体处理

例如，阿里巴巴矢量图图标库中的图表，使用url-loader来进行处理.使用url-loader的配置options，来进行配置。

第三库js库

如何利用远程cdn，如何

  • webpack.ProvidePlugin,使用改模块可以将jQuery引入到全局,自动加载模块，而不必到处 import 或 require 
  1. new webpack.ProvidePlugin({
  2.   $: 'jquery',
  3.   jQuery: 'jquery'
  4. });
  • 本地模块，不是发布在cnd上，也不是npm上的包中

创建 import 或 require 的别名，来确保模块引入变得更简单。例如，一些位于 src/ 文件夹下的常用模块

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/')
    }
  }
};
  • imports-loader