字体 url 路径错误，包含 WebPack Build 后的 css 路径

Posted 2023-03-23

【中文标题】字体 url 路径错误，包含 WebPack Build 后的 css 路径

【英文标题】：Font urls path is wrong and includes css path after WebPack Build

【发布时间】：2020-11-24 19:13:11

【问题描述】：

我想不出合适的组合来让这一切都开心。我遇到了 MiniCssExtractPlugin 创建 css 或更少的文件。

我在 src/client/index.tsx 中导入了一个 less 和一个 css 文件：

import './less/master.less';
import '../../ext/ink-3.1.10/css/ink.min.css';

webpack.config.js 然后用MiniCssExtractPlugin 发挥它的魔力：

注意：我有 publicPath: '' 用于 css 加载器的原因是因为当我有它作为 publicPath: '/lib/css'，它会将其附加到字体 url，因此通过删除 font-urls 至少在 webpack 之后不再存在问题创建了我在运行时仍然看到的潜在问题的 dist。老实说，我什至不知道是否需要在此处设置 publicPath，因为它默认为 "" 反正。

然后将其更改为 publicPath：''，从 /lib/css/lib/assets/fonts 中删除 /lib/css 部分，我认为修复了我的问题问题，但在运行时它仍然试图通过/lib/css/lib/assets/fonts 打字体，这让我感到困惑

const path = require('path');
const  CleanWebpackPlugin  = require('clean-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const htmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

const isProduction = process.env.NODE_ENV === 'production';

const html = () => 
 return new HtmlWebPackPlugin(
  template: path.resolve(__dirname, 'src/client', 'index.html'),
  filename: 'index.html',
  hash: true,
 );
;

const copyAllOtherDistFiles = () => 
 return new CopyPlugin(
  patterns: [
    from: 'src/client/assets', to: 'lib/assets' ,
    from: 'package.json', to: './' ,
    from: 'ext/ink-3.1.10/js/ink-all.min.js', to: 'lib/js' ,
    from: 'ext/ink-3.1.10/js/autoload.min.js', to: 'lib/js' ,
    from: 'ext/js/jquery-2.2.3.min.js', to: 'lib/js' ,
    from: 'feed.xml', to: './' ,
   
    from: 'src/shared',
    to: './shared',
    globOptions: 
     ignore: ['**/*suppressed.json'],
    ,
   ,
  ],
 );
;

module.exports = 
 entry: './src/client/index.tsx',
 output: 
  filename: 'scripts/app.[hash].bundle.js',
  publicPath: '',
  path: path.resolve(__dirname, 'dist'),
 ,
 resolve: 
  extensions: ['.ts', '.tsx', '.js'],
 ,
 devtool: isProduction ? '' : 'eval-cheap-source-map',
 devServer: 
  writeToDisk: true,
  contentBase: path.resolve(__dirname, 'dist'),
  port: 8080,
 ,
 optimization: 
  minimizer: [new TerserJSPlugin(), new OptimizeCSSAssetsPlugin()],
  splitChunks: 
   cacheGroups: 
    styles: 
     name: 'styles',
     test: /\.css$/,
     chunks: 'all',
     enforce: true,
    ,
   ,
  ,
 ,
 module: 
  rules: [
   
    test: /\.(js)$/,
    exclude: /node_modules/,
    use: 
     loader: 'babel-loader',
    ,
   ,
   
    test: /\.(tsx|ts)?$/,
    use: 'ts-loader',
    exclude: /node_modules/,
   ,
   
    test: /\.html$/,
    use: [
     
      loader: 'html-loader',
     ,
    ],
   ,
   
    test: /\.less$/,
    use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
   ,
   
    test: /\.css$/,
    use: [
     
      loader: MiniCssExtractPlugin.loader,
      options: 
       publicPath: '',
      ,
     ,
     'css-loader',
    ],
   ,
   
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    loader: 'file-loader',
    options: 
     outputPath: 'lib/assets/fonts',
    ,
   ,
   
    test: /\.(png|svg|jpg|gif)$/,
    use: ['url-loader'],
   ,
  ],
 ,
 plugins: [
  new CleanWebpackPlugin(),
  copyAllOtherDistFiles(),
  new MiniCssExtractPlugin(
   filename: isProduction ? 'lib/css/[name].[hash].css' : 'lib/css/main.css',
  ),
  html(),
 ],
;

api.js

const compression = require('compression'),
 express = require('express'),
 historyApi = require('connect-history-api-fallback'),
 oneYear = 31536000;

module.exports = express()
 .use(compression())
 .on('error', (err: string) => 
  console.log(err);
 )
 .use(historyApi())
 .use(
  express.static('dist', 
   maxage: oneYear,
  )
 )
 .use((_req: any, res: any) => 
  res.send('Sorry, Page Not Found');
 );

所以问题出现在 runtime 与ink.min.css，因为它引用了一些我也用file-loader 处理的字体，如您在上面看到的。问题是当我通过NODE_ENV=development webpack-dev-server --open 在开发模式下运行站点时，我最终会收到一些对这些字体的请求，因为它在运行时附加了/lib/css/lib/assets/fonts 而不仅仅是/lib/assets/fonts：

不过，奇怪的是当我转到我的 dist 文件夹时，当我查看 styles.main.css 时（显然它出于某种奇怪的原因将 ink.min.css 重命名为这个，字体的 url 没有那个额外的/lib/css 所以我不明白为什么当我的浏览器加载时它仍然试图用那个额外的部分来引用它：

另一件有点奇怪的事情是我确实看到了图片加载，但是当我在浏览器中查看源代码时，我没有看到我的资产文件夹。我知道 dist 肯定包含它，但它没有在这里显示：

【参考方案1】：

我不明白为什么这会解决它。这整件事让我觉得很老套。

我改成publicPath: '../../'

test: /\.css$/,
    use: [
     
      loader: MiniCssExtractPlugin.loader,
      options: 
       publicPath: '../../',
      ,
     ,
     'css-loader',
    ],

我想我正在加载我的 .css 文件，然后我已经在 /lib/css 的上下文中，所以我猜我的字体 url 有 /lib/css？并且出于某种原因我需要让MiniCssExtractPlugin 在根目录下有一个公共路径？没看懂。

现在我也看到了资产文件夹，wt???

【讨论】：

同样的事情也发生在我身上。感谢您更新您的问题！