webpack使用url-loader处理文件、图片

下载

网上都说只需要url-loader就行了，但是我在实际开发过程中碰到了字体文件提示需要file-loader，所以为了避免出问题，这里也下载一下file-loader

npm install url-loader file-loader --save

配置 webpack.config.js

{
    test: /\.(png|svg|jpg|gif|woff|woff2|svg|eot|ttf)$/,
    loader: 'url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=output/'
    'url-loader?limit=8192&&name=img/[name].[ext]'
} 

详解

其实最重要的就是他的这几个参数：limit、name、outputPath、publicPath

limit：文件大小小于limit参数，url-loader将会把文件转为DataURL；文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。
name：输出的文件名规则，如果不添加这个参数，输出的就是默认值：文件哈希；加上[path]表示输出文件的相对路径与当前文件相对路径相同，加上[name].[ext]则表示输出文件的名字和扩展名与当前相同。加上[path]这个参数后，打包后文件中引用文件的路径也会加上这个相对路径。
outputPath：表示输出文件路径前缀。图片经过url-loader打包都会打包到指定的输出文件夹下。但是我们可以指定图片在输出文件夹下的路径。比如outputPath=img/，图片被打包时，就会在输出文件夹下新建（如果没有）一个名为img的文件夹，把图片放到里面。
publicPath：表示打包文件中引用文件的路径前缀，如果你的图片存放在CDN上，那么你上线时可以加上这个参数，值为CDN地址，这样就可以让项目上线后的资源引用路径指向CDN了