Question

我有来自https://survivejs.com/webpack/styling/loading/

的以下网络摘要片段

{
         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项目中工作的组件。

任何想法？

问题的要点： 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

webpack：webpack.config.js无法正确加载字体

1 个答案: