意外[路径]文件装载机

对于我的形象定位：/src/assets/bitmap/sample.jpg意外[路径]文件装载机

考虑的关键配置：

context: resolve('src')

output: { 
    path: resolve('builds/web'), 
    publicPath: '', 
    filename: ifProd('[name].[chunkHash].js', '[name].js') 
},

...

loaders: [ 
    { 
    test: /\.(png|jpg|jpeg)/, 
    loader: 'file-loader?name=[path][name].[ext]?[hash]' 
    } 
]

我我期待输出的结构如下图所示：

/builds/web/assets/bitmap/sample.jpg

相反，我得到这样的：

/builds/web/src/assets/bitmap/sample.jpg

我怎么知道该文件加载器是输出路径必须是相对于/src而不是/？

来源

2016-11-14 Birowsky

你有没有解决过这个问题？ – pilau

@pilau不记得了。对不起 – Birowsky

谢谢。我想，最后，在2天后，我发现：'file-loader'的'context'选项负责加载器如何构建相对路径。含义：'context' = src目录中的根文件夹，从中可以复制生成的生成目录中的相对路径。 – pilau

经过2天的反复试验（感谢Webpack docs！），我发现有一种方法可以控制文件加载器的输出，并复制输出目录中源目录的文件结构。这是设置的WebPack context，可每装载机或每建造，用于文件装载机：

use: [{ 
    loader: 'file-loader', 
    options: { 
     context: <path>, // The directory to draw relative paths from 
     name: '[path][name].[ext]' 
    }, 
    },

这里有一个如何使用它的一个例子。比方说，你期望的结果是通过www.website.com/assets/images/user.png

你的项目的文件结构，以加载图像是：

project/ 
├── src/ 
│ └── assets/ 
│  └── images/ 
│   └── user.png 
└── build/

和期望的结果是：

project/ 
├── src/ 
│ └── assets/ 
│  └── images/ 
│   └── user.png 
└── build/ 
    └── assets/ 
     └── images/ 
      └── user.png

这个配置是：

use: [{ 
    loader: 'file-loader', 
    options: { 
     context: path.resolve(__dirname, 'src') 
     name: '[path][name].[ext]' 
    }, 
    },

而这是因为你想复制下的文件结构src构建内部文件夹folder。

如果你想从路径中删除assets目录，context值将是：path.resolve(__dirname, 'src/assets')和文件加载器将复制在'SRC /资产的开始，而不是相对路径，其结果将是：

project/ 
├── src/ 
│ └── assets/ 
│  └── images/ 
│   └── user.png 
└── build/ 
    └── images/ 
     └── user.png

来源

2017-10-25 11:49:12 pilau

意外[路径]文件装载机

回答

相关问题