webpack：webpack.config.js 没有正确加载字体

Question

我有以下来自https://survivejs.com/webpack/styling/loading/的webpack sn-p

{
         test: /\.(woff|woff2|eot|ttf|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader',
        options:{
          name: '[name].[ext]'
        }
      },

用于从我的 css/fonts 目录加载字体。 我的 CSS 目录有以下文件：

type/
img/
design.css

我可以在我的项目中成功使用 css 文件和 img 文件。

输入类型

我有一堆格式如下的字体

font-bold-v01.otf
font-bold-v01.woff

这些在我的 design.css如下：

  src:  url("./type/font-bold-v01.woff") format("woff"),

如果我删除我的 webpack sn-ps，我会收到错误消息。使用我的 sn-p 我没有收到任何错误，但字体不会影响在非 webpack 项目中工作的组件。

有什么想法吗？

问题要点： https://gist.github.com/MatthewJamesBoyle/2cebb7d1cdc76dc1692125d08fd9a31d

Answer 1

您的字体被嵌入到 JS 中，这就是为什么当 JS 不包含在 HTML 中时它们停止工作

不幸的是，这是 webpack 1，您需要针对 webpack 2 进行调整

如果您希望将 CSS 和资产（字体/图像）构建到独立文件中：

安装这些插件：

npm install --save-dev file-loader
npm install --save-dev extract-text-webpack-plugin@1.0.1

使用 ExtractTextPlugin 编写 CSS：

// in your webpack.config.js file
 var ExtractTextPlugin = require('extract-text-webpack-plugin')


// in the "module" section of your webpack config
plugins:[
new ExtractTextPlugin(
            './css/[name].css',
            {
            allChunks:true,
        }),
//...
]

并使用文件加载器（令人困惑的是，它实际上是一个文件写入器） 而不是 url-loader:

//in the "module/loaders" section of your webpack config

           {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            },

           {
                test: /\.(woff|woff2|eot|ttf|svg|jpg|png|ico)(\?.+)?$/,
                loader: 'file-loader',
                query: {
                    name: './static/[name].[ext]'
                }
           },

请注意，文件加载器为要写入的字体指定 static 子文件夹。

确保你在 webpack 配置对象的顶层设置这个：

 output: {
        publicPath: '/', // HTTP server base URL
        path: '/home/user/project/build', // filesystem path for the webpack bundles
}
//...

使用此示例配置，您将在此文件夹中获取字体：

/home/user/project/build/static

和中的 CSS

/home/user/project/build/css