webpack通过url-loader获取资源文件路径

当webpack的项目需要引入一个资源文件时，比如一个swf文件，可以通过url-loader获取打包后资源的路径

首先通过npm安装url-loader

npm install --save-dev url-loader

配置webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.swf$/,            
        loader: 'url-loader',
        options: {
          limit: 1024,
          name: 'file/[path][name].[hash:7].[ext]'
        }
      }
    ]
  }
}

limit:是对文件大小的限制，当文件小于限制时返回的是base64的形式，大于限制值时返回的是一个路径
name:是文件打包后的路径和名字，path是原路径，name是原文件名，hash:7是七位的哈希值，ext是文件后缀，可以随意搭配

import引入

import swf from '@/assets/webuploader/Uploader.swf'
console.log(swf)//得到路径‘/file/src/assets/webuploader/Uploader.10d5704.swf’

打包后就可以得到对应的文件