无法解析“/fonts/mem”。“D:\Programming\Demos\webpack compact\src”中的woff2“使用绝对路径”

Question

我在一个现有的项目中配置Webpack，我避免改变项目结构。在scss文件中，我包括以/开头的文件（例如url（'/fonts/mem.woff2'）），我相信这是我的问题的原因。

风格。scss

@font-face {
    font-family: 'MyFont';
    src: url('/fonts/mem.woff2') format('woff2'),
      url('/fonts/slick.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

错误是：

错误：无法解析“/fonts/mem”。woff2'位于D:\Programming\Demos\webpack compact\src的finishWithoutResolve处（D:\Programming\Demos\webpack compact\node\U modules\enhanced resolve\lib\Resolver.js:293:18），位于D:\Programming\Demos\webpack compact\node\U modules\enhanced resolve\lib\Resolver。js:362:15在D:\Programming\Demos\webpack compact\node\u modules\enhanced resolve\lib\Resolver。js:410:5在eval（创建时评估）（D:\Programming\Demos\webpack compact\node\u modules\enhanced resolve\node\u modules\tapable\lib\Hoo在D:\Programming\Demos\webpack compact\node\u modules\enhanced resolve\lib\Resolver.js:410:5在eval（创建时评估（D:\Programming\Demos\webpack compact\node\u modules\enhanced resolve\node\u modules\tapable\lib\Hoo at D:\Programming\Demos\webpack compact\node\u modules\lib\Resolver.j at eval（eval at create（D:\Programming\Demos\webpack compact\node\u modules\enhanced-at D:\Programming\Demos\webpack compact\node\u modules\enhanced resolve\lib\Resolver.j

我的webpack文件如下所示：

module.exports = env => {
const isDev = env.NODE_ENV == 'dev';

return {
    target: 'web',
    mode: 'development',
    devtool: 'inline-source-map',
    entry: {            
        index: path.resolve(__dirname, "src", "index.js")
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),            
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        port: '8080',
        host: 'localhost',
        hot: true,
        open: true,
        inline: true
    },
    plugins: [
        new CleanWebpackPlugin(),            
        new HtmlWebpackPlugin({
            title: 'Development',
            template: path.resolve(__dirname, "src", "index.html"),
            filename: 'index.html',
        })
    ],
    module:{
        rules: [               
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'fonts/',
                },
            }
            ...

我知道如果我改变字体路径。/它会工作。我的问题是，有没有可能只改变webpack配置，而不是去所有的scss文件，并改变路径的url（'/fonts/mem.woff2'）？

Answer 1

我相信这是可能的webpack。NormalModuleReplace ementPlugin.

以下是你如何做到这一点：

plugins: [
 //…
 new webpack.NormalModuleReplacementPlugin(
      /^\/fonts\/mem\.woff2/,
      function (resource) {
        resource.request = resource.request.replace(/^\//, './');
      }
    )
]

由于示例中有两种字体，因此可以应用另一个网页。NormalModuleReplacementPlugin插件。