的WebPack：webpack.config.js不加载字体正确

我从https://survivejs.com/webpack/styling/loading/的WebPack：webpack.config.js不加载字体正确

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

以下的WebPack片断其目的是从我的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

来源

2017-03-08 Programatt

你的字体嵌入在JS，这就是为什么他们停止工作时，在HTML中不包括JS

不幸的是，这是的WebPack 1，你需要调整为2的WebPack

如果你想建立的CSS和资产（字体/图像）到独立的文件：

安装这些插件：

npm install --save-dev file-loader 
npm install --save-dev [email protected]

使用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, 
     }), 
//... 
]

，并使用文件加载程序（其中，容易混淆的是，实际上是一个文件writer）代替网址装载机：

//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

来源

2017-03-08 17:29:20

感谢您的帮助，我遇到了一些问题仍然存在。如果你能帮助我，我会非常感激：https：//gist.github。com/MatthewJamesBoyle/2cebb7d1cdc76dc1692125d08fd9a31d – Programatt

哦，你需要安装与npm插件（如我的回答中所述），并将其与'var ExtractTextPlugin = require（'extract-text-webpack-plugin'）;''导入它;' –

我调整了答案 –

的WebPack：webpack.config.js不加载字体正确

回答

相关问题