的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不加載字體正確

回答

相關問題