Question

我正在使用“自定义Webpack”构建器运行Angular 8。

import numpy as np

def funny_phrases(list):      
    funny = np.array(list)
    funny_mask = [len(item) >= 6 for item in funny]
    funny = funny[funny_mask]

    phrases = funny.copy()
    p_mask = [item[-1] == 'y' for item in phrases]
    phrases = phrases[p_mask]

    return phrases

我引用了"builder": "@angular-builders/custom-webpack:browser",，并且引用了ngx-datatable如下：

css

所引用的css文件具有如下所示的字体：

@import '~@swimlane/ngx-datatable/release/assets/icons.css';

我想要做的是将数据表字体文件内联到我的webpack构建中。我的理解是，在安装base64-inline-loader之后，我应该能够拥有一个定制的webpack配置，如下所示：

@font-face {
  font-family: "data-table";
  src:url("fonts/data-table.eot");
  src:url("fonts/data-table.eot?#iefix") format("embedded-opentype"),
    url("fonts/data-table.woff") format("woff"),
    url("fonts/data-table.ttf") format("truetype"),
    url("fonts/data-table.svg#data-table") format("svg");
  font-weight: normal;
  font-style: normal;

但是，运行构建后，没有任何内联，并且我可以看到浏览器正在向

发出请求

module.exports = {
  module: {
    rules: [
 {
   test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
   use: 'base64-inline-loader'
 }
    ]
  }
};

我不清楚如何解决此问题。我的理解是，对于.png，.woff，.eot等文件，默认的Angular Webpack配置将使用文件加载器，该文件加载器将在dist目录中吐出该文件的哈希版本。但是，即使添加了base64-inline-loader之后，我仍然看到文件被复制并散列，而不是内联。

修改

我相信我的问题与Angular 7, svg and sass how to set relative path有关，但是我仍然不确定如何解决。

Answer 1

可能是您的Webpack.config.js需要进行一些调整吗？

我更喜欢保持命令行干净（这里：webpack --config Webpack.config.js）并将所有内容都放入配置文件中。假设您使用的是Webpack的较新版本，我建议使用与此类似的配置文件

var path = require('path'); // this is essential for path.resolve()

module.exports = {
  mode: 'development',
  entry: './yourEntryPage.js',
  output: {
    path: path.resolve(__dirname, 'dist'), // specifies the output
    filename: 'bundle.js'
  },
 devtool: "source-map", // for debugging webpack's output.
  module: {
    rules: [
        {   test: /\.jsx$|\.es6$|\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['react'],
                }
            },
            exclude: /node_modules/
        },
        {   test: /\.(png|jpg|gif)$/,
            use: {  
                loader: 'file-loader',
                options: { 
                    name: '[name].[ext]',
                    outputPath: 'images/'
                }
            }
        },
        {   test: /\.(ttf|eot|woff(2)?)$/, // modified regex matching files with font extension
            use: 'base64-inline-loader'
        }           
    ]
  }
};

您不能直接使用此配置文件，但是我希望我的建议可以使您了解Webpack不太理想的配置的外观。您建议的Webpack.config.js可能不仅存在路径问题，而且可能会遗漏指定不同加载程序的层次结构。很有可能是从未达到您的内联装入程序案例陈述。

注意：我不知道@angular-builders/custom-webpack:browser，但是我希望该软件包对Webpack.config.js的影响不会太大。我的经验告诉我，在95％的情况下，cuplrit是一个Webpack配置问题。 --verbose，--progress或-d可能会派上用场，请参阅Webpack's CLI documentation。

Answer 2

Webpack会将字体内联到您的输出.js文件（或.woff文件）中，但不会保留。这意味着您必须在angular.json的静态资源中手动添加此字体：

"assets": [
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/swimlane_or_whatever/assets/",
                "output": "my-assets"
              },

上面的代码意味着运行开发服务器后，资源/my-assets/fonts.woff将被解析并传递给客户端。

无法内嵌来自npm模块的字体

2 个答案: