[英]Output fonts, css files and other assets in a subdirectory of the dist folder
I'm following the guide on the official webpack website.我正在关注官方 webpack 网站上的指南。 For a reproducible code see this section in the official website.
有关可重现的代码,请参阅官方网站中的 此部分。
In the example provided, all the fonts are output under the dist folder.在提供的示例中,dist 文件夹下的所有 fonts 都是 output。 What I want is for the fonts to be output under a fonts subdirectory.
我想要的是 fonts 是 fonts 子目录下的 output 。 Similarly for other types of assets such as css, images etc. I want them to be output under a folder depending on their extension.
对于其他类型的资产(例如 css、图像等)也是如此。我希望它们是 output 在文件夹下,具体取决于它们的扩展名。
The output would look something like this: output 看起来像这样:
-/dist
--index.html
--bundle.js
--/css
---style1.css
--/fonts
---font1.woff
---font2.ttf
You can use file-loader to achieve that:您可以使用file-loader来实现:
{
test: /\.(png|svg|jpe?g|gif)$/,
include: /images/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/',
publicPath: 'images/'
}
}
]
},
{
test: /\.(woff(2)?|ttf|otf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
include: /fonts/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/',
publicPath: 'fonts/'
}
}
]
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.