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

问题描述

我无法在这里找到正确的组合来让这一切都开心。我遇到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：

注意：我为css加载程序使用publicPath : ''的原因是因为当我将它作为publicPath : '/lib/css'时，它会将其附加到字体 url，因此通过删除 font-urls 不再具有至少在 webpack 创建了我在运行时仍然看到的底层问题的 dist 之后出现问题。老实说，我什至不知道是否需要在此处设置 publicPath，因为无论如何它默认为“”。

然后将其更改为publicPath : ''，/lib/css从中删除部分/lib/css/lib/assets/fonts，我认为这解决了我的问题，但是在运行时它仍然试图通过/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');
 });

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

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

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

标签： javascriptreactjswebpack

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

问题描述

解决方案

推荐阅读