Question

我有以下webpack脚本：

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

我的文件被捆绑并输出到构建目录，一切正常。但是，我现在添加了一个字体加载器。在我的app目录中，我在以下文件夹中有字体文件：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内部）？

Answer 1

  {
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    exclude: /node_modules/,
    loader: 'file-loader?limit=1024&name=fonts/[name].[ext]'
  },
  { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    exclude: /node_modules/,
    loader: "file-loader?limit=1024&name=fonts/[name].[ext]"
  }

字体现在正在按预期方式转换为public / fonts目录。

但是现在我试图通过从app/assets/images获取文件并将它们放在public/images/中来获得相同的结果，但是webpack命令甚至没有选择下面的代码：

{
      test: /\.(jpg|jpeg|gif|png|svg)$/,
      exclude: /node_modules/,
      loader: "file-loader?limit=1024&name=images/[name].[ext]"
  }

它出了什么问题？它与字体脚本相同。

Answer 2

使用url加载程序（未指定任何路径（输出或公共路径））解决了我的问题（在此处https://www.robinwieruch.de/webpack-font找到了原始答案）

//webpack.config.js

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

Webpack和文件加载器不加载字体

2 个答案: