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加载字体

回答

相关问题