字体网址路径错误，在 WebPack 构建之后包含 css 路径

Question

I can't figure out the right combo here to make this all happy. I'm having MiniCssExtractPlugin create css or less files encountered.

I am importing a less and a css file in src/client/ index.tsx :

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

webpack.config.js is then doing its magic with MiniCssExtractPlugin :

Note : the reasons I have publicPath : '' for the css loader is because when I had it as publicPath : '/lib/css' , it was appending that to the font url so by removing that the font-urls no longer had the issue at least after webpack created dist of the underlying problem I still see at runtime. Honestly I don't know if I even need to set publicPath here anyway because it defaults to "" anyway.

Changing it then to publicPath : '' , stripped out the /lib/css part from /lib/css/lib/assets/fonts and I thought that fixed my issue but then during runtime it's still trying to hit fonts via /lib/css/lib/assets/fonts which baffles me

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');
 });

So the issue comes up during runtime with ink.min.css because it's referencing some fonts that I also processed with file-loader as you can see above. The problem is when I run the site in Dev mode via NODE_ENV=development webpack-dev-server --open I end up with a few requests for those fonts because it's appending /lib/css/lib/assets/fonts instead of just /lib/assets/ fonts during runtime:

The weird thing about this though is when I go to my dist folder, when I look at styles.main.css (which apparently it renamed ink.min.css to this for some odd reason, the url to the fonts don't have that extra /lib/css so I don't understand why when my browser loads it's trying to reference it with that extra part still:

Another thing that's kinda weird is I do see images loading but when I look at the source in the browser, I don't see my assets folder. I know dist definitely contains it, but it doesn't show it here:

Answer 1

I don't understand why this fixed it. This entire thing feels hacky to me.

I changed it to publicPath: '../../'

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

I guess I'm loading my.css file and then I'm under the context of /lib/css already so my font urls have /lib/css I guess? and I need to for some reason have MiniCssExtractPlugin have a public path at the root? I don't get it.

Also now I see the assets folder, wt???