Question

我使用webpack捆绑我的Angular2应用程序，包括图像/ sass和字体。我使用gulp与webpack / webpackstream＆amp; webpack-dev-server用于服务器服务器或创建构建。一切正常，但我无法在创建构建时让字体工作。

下面你将看到webpack配置，gulpfile，css文件和我的文件夹结构的一部分。

每当我使用webpack-dev-server时，我都可以在网络选项卡中看到已经从/ assets / fonts /

正确加载了字体（[hash] .woff）

当我运行构建时，字体不会在./dist/assets/fonts中创建，我收到一个控制台错误说（无法加载资源：file：///％path％/ dist / assets / fonts / e13dca925b232dd96ae6bc48b7b7264b .woff net :: ERR_FILE_NOT_FOUND）

到目前为止，我一直不熟悉google甚至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

Answer 1

使用 /assets/fonts/[name].[ext] 代替 /资产/字体/ [散列]。[EXT]

Webpack url-loader加载字体

1 个答案: