Я использую webpack для объединения моего приложения Angular2, включая изображения / sass и шрифты. Я использую gulp с webpack / webpackstream и webpack-dev-server для обслуживания либо сервера разработки, либо создания сборки. Все работает нормально, за исключением того, что я не могу заставить работать шрифты при создании сборки.
Ниже вы увидите часть конфигурации веб-пакета, gulpfile, css-файл и мою структуру папок.
Всякий раз, когда я использую webpack-dev-server, я вижу на вкладке сети, что шрифт был правильно загружен ([hash] .woff) из / assets / fonts /
Когда я запускаю сборку, шрифты не создаются в ./dist/assets/fonts, и я получаю сообщение об ошибке консоли (Не удалось загрузить ресурс: file: ///%path%/dist/assets/fonts/e13dca925b232dd96ae6bc48b7b7264b.woff net :: ERR_FILE_NOT_FOUND)
Мне пока не повезло с Google или даже с stackoverflow, надеюсь, кто-то знает, что я делаю не так.
Огромное спасибо заранее.
Конфигурация веб-пакета
entry: {
styles: "./client/sass/main",
scripts: "./client/app/main",
polyfills: [
"./node_modules/es6-shim/es6-shim",
"./node_modules/angular2/bundles/angular2-polyfills"
]
},
module: {
loaders: [
{
test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
},
{
test: /\.scss$/,
loaders: ['style', 'css', 'postcss', 'sass']
},
{
test: /\.html$/,
loader: "html"
},
{
test: [/\.png$/,/\.jpg$/,/\.jpeg$/],
loader: "url-loader?mimetype=image/png"
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff&name=./assets/fonts/[hash].[ext]"
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff&name=./assets/fonts/[hash].[ext]"
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream&name=./assets/fonts/[hash].[ext]"
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml&name=./assets/fonts/[hash].[ext]"
}
]
},
main.scss
@font-face {
font-family:'senticosansdtlight';
src: url('../assets/fonts/senticosansdt-light-webfont.eot');
src: url('../assets/fonts/senticosansdt-light-webfont.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/senticosansdt-light-webfont.woff') format('woff'),
url('../assets/fonts/senticosansdt-light-webfont.ttf') format('truetype'),
url('../assets/fonts/senticosansdt-light-webfont.svg#senticosansdtlight') format('svg');
font-weight: normal;
font-style: normal;
}
Gulpfile
// Webpack:build creates the bundles that are specified in webpack.prod.js
gulp.task("webpack:build", function() {
return gulp.src('')
.pipe(webpackStream(require('./webpack.prod.js')))
.pipe(gulp.dest('./dist'));});
//webpack dev server
gulp.task("webpack-dev-server", function(callback) {
new WebpackDevServer(webpack(webpackConfig), {
stats: {
colors: true
},
contentBase: config.src.base
}).listen(8080, "localhost", function(err) {
if(err) throw new gutil.PluginError("webpack-dev-server", err);
gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/index.html");
});
});
Структура папки
dist/
client/
app/
main.js
assets/
fonts/
sass/
main.scss
file:///%path%/dist/assets...
? - person Bob Sponge   schedule 21.04.2016