Webpack и файл-загрузчик не загружают шрифты
У меня есть следующие скрипты веб-пакета:
const PATHS = {
app: path.join(__dirname, 'app'),
build: path.join(__dirname, 'build'),
fonts: path.join(__dirname, 'app/assets/fonts')
};
Мои файлы упакованы и выводятся в каталог сборки, и все работает нормально. Однако теперь я добавил загрузчик шрифтов. Внутри моего каталога приложений у меня есть файлы шрифтов в следующей папке: app/assets/fonts
(в настоящее время только TTF, но это изменится).
const common = {
entry: {
app: PATHS.app
},
output: {
path: PATHS.build,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel-loader?presets[]=es2015,presets[]=stage-2,presets[]=react,plugins[]=transform-runtime'],
exclude: /node_modules/
},
{
test: /\.scss$/,
loaders: ["style", "css?sourceMap", "sass?sourceMap"]
},
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
]
]
}
};
Мой скрипт шрифтов выше ничего не делает, я запускаю оба скрипта по умолчанию:
"build": "webpack",
"start": "webpack-dev-server"
И ничего не помещается в публичный каталог. Это то, что я должен установить отдельно? Как я могу сказать загрузчику создать идентичный каталог (внутри каталога app/) внутри публичной папки с моими файлами шрифтов?
1 ответ
Использование url-загрузчика (без указания каких-либо путей (выходных или общедоступных)) решило мою проблему (исходный ответ найден здесь https://www.robinwieruch.de/webpack-font)
//webpack.config.js
...
module.exports = {
...
module: {
rules: [
...
{
test: /\.(woff|woff2)$/,
use: {
loader: 'url-loader',
},
},
],
},
...
};
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
exclude: /node_modules/,
loader: 'file-loader?limit=1024&name=fonts/[name].[ext]'
},
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
exclude: /node_modules/,
loader: "file-loader?limit=1024&name=fonts/[name].[ext]"
}
Шрифты теперь переносятся в каталог public/fonts, как и ожидалось.
Но сейчас я пытаюсь добиться того же результата, получая файлы из app/assets/images
и положить их внутрь public/images/
но код ниже даже не подхватывается webpack
команда:
{
test: /\.(jpg|jpeg|gif|png|svg)$/,
exclude: /node_modules/,
loader: "file-loader?limit=1024&name=images/[name].[ext]"
}
Что с этим не так? Это так же, как скрипт шрифтов.