Webpack中使用HtmlWebpackPlugin添加字体失败求助

问题详情 #

我是Webpack新手，在添加字体时遇到问题。已配置HtmlWebpackPlugin、file-loader等工具，尝试在HTML模板中引入字体样式文件stylesheet.css但始终无法找到，调整路径及字体文件存放位置均无效。相关配置代码如下：

webpack.config.js 核心配置 #

plugins: [
    new ESLintPlugin(),
    new HtmlWebpackPlugin({
        template: '/var/lib/cornerstone3D/utils/PROYECTO/template.html',
    }),
    new webpack.DefinePlugin({
         __BASE_PATH__: "''",
    }),
    new CopyPlugin({
        patterns: [
            {
                from: '../../../node_modules/@cornerstonejs/dicom-image-loader/dist/dynamic-import',
                to: '/var/lib/cornerstone3D/utils/PROYECTO/dist',
            },
        ],
    }),
    // new BundleAnalyzerPlugin()
],

entry: path.join('/var/lib/cornerstone3D/packages/tools/proyecto', './editor/index.ts'),
output: {
    path: '/var/lib/cornerstone3D/utils/PROYECTO/dist',
    filename: 'editor.js',
},

file-loader 规则配置 #

{
    test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
                outputPath: ''
            }
        }
    ]
},

HTML中尝试的引入方式 #

<link type="css" rel="stylesheet" 
 href="./packages/tools/proyecto/editor/fonts/Montserrat/stylesheet.css">

以及

<link type="css" rel="stylesheet" href="./fonts/Montserrat/stylesheet.css">

stylesheet.css 内容 #

@font-face {
    font-family: 'montserratbold';

    src: url('montserrat-bold-webfont.eot');
    src: url('montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('montserrat-bold-webfont.woff2') format('woff2'),
         url('montserrat-bold-webfont.woff') format('woff'),
         url('montserrat-bold-webfont.ttf') format('truetype'),
         url('montserrat-bold-webfont.svg#montserratbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

解决步骤 #

1. 改用Webpack模块方式导入CSS #

不要在HTML模板中直接引入CSS，而是在入口文件index.ts中导入：

// /var/lib/cornerstone3D/packages/tools/proyecto/editor/index.ts
import './fonts/Montserrat/stylesheet.css';

2. 添加CSS解析loader #

Webpack无法直接处理CSS，需要安装并配置css-loader和style-loader：
首先安装依赖：

npm install style-loader css-loader --save-dev

然后在webpack.config.js的module.rules中添加规则：

{
  test: /\.css$/i,
  use: ['style-loader', 'css-loader'], // 生产环境可替换为MiniCssExtractPlugin.loader
}

3. 调整file-loader路径配置 #

修改file-loader的输出和公共路径，确保CSS中的字体引用路径正确：

{
    test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
                outputPath: 'fonts/Montserrat/', // 字体输出到dist/fonts/Montserrat
                publicPath: './fonts/Montserrat/' // 让CSS中的url指向该路径
            }
        }
    ]
},

4. 移除HTML中的link标签 #

删除模板里的<link>标签，Webpack会自动处理CSS的注入（style-loader会插入style标签，生产环境用MiniCssExtractPlugin会生成单独CSS文件并自动添加link）。

5. 确认目录结构 #

确保文件结构与导入路径匹配：

packages/tools/proyecto/editor/
├── index.ts
└── fonts/
    └── Montserrat/
        ├── stylesheet.css
        ├── montserrat-bold-webfont.eot
        ├── montserrat-bold-webfont.woff2
        ├── montserrat-bold-webfont.woff
        ├── montserrat-bold-webfont.ttf
        └── montserrat-bold-webfont.svg

内容的提问来源于stack exchange，提问作者adrian