1

我有以下 webpack 脚本：

const PATHS = {
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build'),
  fonts: path.join(__dirname, 'app/assets/fonts')
};

我的文件被捆绑并输出到构建目录，一切正常。但是，我现在添加了一个字体加载器。在我的应用程序目录中，我在以下文件夹中有字体文件：（app/assets/fonts目前只有 TTF，但这会改变）。

const common = {
  entry: {
    app: PATHS.app
  },
  output: {
    path: PATHS.build,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loaders: ['react-hot', 'babel-loader?presets[]=es2015,presets[]=stage-2,presets[]=react,plugins[]=transform-runtime'],
        exclude: /node_modules/
      },
      {


   test: /\.scss$/,
    loaders: ["style", "css?sourceMap", "sass?sourceMap"]
  },
  { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
  { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
]
    ]
  }
};

我上面的字体脚本什么都不做，我运行了两个默认脚本：

"build": "webpack",
"start": "webpack-dev-server"

并且没有任何东西放在公共目录中。这是我必须单独设置的东西吗？如何告诉加载程序在公共文件夹中使用我的字体文件创建一个相同的目录（与 app/ 内的目录相同）？

4

1 回答 1

1

使用 url-loader（不指定任何路径（输出或公共））解决了我的问题（原始答案在这里找到https://www.robinwieruch.de/webpack-font）

//webpack.config.js

...
module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.(woff|woff2)$/,
        use: {
          loader: 'url-loader',
        },
      },
    ],
  },
  ...
};

于 2020-11-07T06:59:04.060 回答