Webpack url-loader加載字體

我使用webpack捆綁我的Angular2應用程序，包括圖像/ sass和字體。我使用webpack/webpackstream的gulp webpack-dev-server服務於開發服務器或創建構建。一切正常，除非我創建構建時無法使字體正常工作。Webpack url-loader加載字體

下面你會看到webpack config，gulpfile，css文件和我的文件夾結構的一部分。

每當我使用的WebPack-DEV-服務器I可以在網絡標籤看到該字體已被加載（[散列] .woff）從/資產/字體正確/

當我運行構建的字體沒有在./dist/assets/fonts中創建，我得到一個控制檯錯誤說（無法加載資源：file：///%path%/dist/assets/fonts/e13dca925b232dd96ae6bc48b7b7264b.woff net :: ERR_FILE_NOT_FOUND）

到目前爲止，我一直在運氣不佳，甚至使用了stackoverflow，我希望有人知道我做錯了什麼。

非常感謝你提前。

的WebPack配置

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

來源

2016-04-21 Geo

不能完全確定，但在我設置我用raw-loader複製一個資源文件夾。這對你有用嗎？ –

在你的webpack配置中指定[context]（https://webpack.github.io/docs/configuration.html#configuration-object-content）參數。 –

不幸的是，指定上下文也沒有工作 – Geo

使用 /assets/fonts/[name].[ext] 代替 /assets/fonts/[hash].[ext]

來源

2017-07-11 09:49:33 Rhonin

Webpack url-loader加載字體

回答

相關問題