file-loader利用 [path] 和 context 灵活控制文件的输出路径

[path]

类型：{String}

默认值：file.dirname

解释：资源相对于 context 的路径

 

context

类型：{String}

默认值：this.options.context

解释：配置自定义文件 context，默认为 webpack.config.js 的 context 配置项(为字符串，基础目录，绝对路径，用于从配置中解析入口起点(entry point)和 loader，默认值为webpack.config.js的当前目录)

 

主要解释一下 “资源相对于 context 的路径” 这句话，

主要的意思是相对路径

平时在引入js文件的时候都是写的相对路径，比如

<script src="js/a.js"></script>

src="js/a.js" 这个是什么意思呢，其实说的完整一点就是，相对于当前目录下的js文件夹下的a.js文件

这里需要举例子说明一下：

知道画红线的图片资源的[path]是什么吗？

其实可以这么理解：你在webpack.config.js中要引入这个文件，你怎么写呢？肯定是这么写的

src="src/views/game/imgage/keyboard.png"

所以这个就是相对路径：那么你的 [path] 就是，src/views/game/imgage/

那如果把context 改成： 

path.resolve(__dirname, 'src/views')

那么这个时候要引入上面那个图片呢，可以怎么理解

在src/views这文件下的一个html文件去引入图片

肯定是这么写的 <img src="game/image/keyboard.png" />

所以这个是[path] 就是 game/image/

现在可以理解了吗？

好吧，也许只有我开始不会理解它；所以才会做下这个笔记；

 

那么其实只有理解它，要把文件打包后放到相应的位置就很灵活了，可以这么用

 

{
   test: /\.(png|jpg|gif)$/,
   use: [
      {
         loader: 'url-loader',
         options: {
            limit: 1000,
            name: 'views/[path][name].[ext]',
            context: path.resolve(__dirname, 'src/views')
         }
      }
   ]
}

那么图片打包后会放在哪里呢；

其实没有一个绝对的位置，它会根据你源代码的图片位置去放置你打包后的资源位置；

但是可以肯定是，肯定是放置 views 下的 至于具体的后面 [path] 是什么值，就看具体项目了；

我一般都是把它的情况是：

如果要求打包后的文件结构和源代码的文件夹结构保持不变就可以这么用；

 

仅此做个笔记，如果有大神看到哪里写的错误，还望指正一下。