字體用 - 用的WebPack postcss

Question

好像我有很多的問題，最近的WebPack :)但在這裏不用另外一個爲你們：

文件夾結構

CSS

@font-face { 
    font-family: 'LatoBlack'; 
    src: url('/font/Lato-Black.eot'); /* IE9 Compat Modes */ 
    src: url('/font/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('/font/Lato-Black.woff2') format('woff2'), /* Modern Browsers */ 
     url('/font/Lato-Black.woff') format('woff'), /* Modern Browsers */ 
     url('/font/Lato-Black.ttf') format('truetype'); 
    font-style: normal; 
    font-weight: normal; 
    text-rendering: optimizeLegibility; 
} 

的WebPack配置

'use strict'; 
var path = require('path'); 
var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var qs = require('querystring'); 
var font = require('postcss-font-magician')({ 
    hosted: '/public/fonts' 
}); 
var precss = require('precss'); 
var autoprefixer = require('autoprefixer'); 
var stripInlineComments = require('postcss-strip-inline-comments'); 

module.exports = { 
    devtool: 'eval-source-map', 
    // resolve: { modulesDirectories: ['node_modules'], extension: ['', '.js', '.css'] }, 
    entry: [ 
     'webpack-hot-middleware/client?reload=true', 
     path.join(__dirname, 'src/client/js/Kindred') 
     // path.join(__dirname, 'app/main') 
    ], 
    output: { 
     path: path.join(__dirname, '/public/'), 
     filename: '[name].js', 
     publicPath: '/' 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: 'app/index.tpl.html', 
      inject: 'body', 
      filename: 'index.html' 
     }), 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin(), 
     new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': JSON.stringify('development') 
     }) 
    ], 
    module: { 
     loaders: [{ 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel', 
      query: { 
       "presets": ["react", "es2015", "stage-0", "react-hmre"] 
      } 
     }, { 
      test: /\.json?$/, 
      loader: 'json' 
     }, 
      {test: /\.jpg$/, loader: "file-loader"}, 
      // Font Definitions 
      { 
       test: /\.css$/, 
       loaders: [ 
        'style-loader', 
        'css-loader?importLoaders&' + qs.stringify({ 
         modules: true, 
         importLoaders: 1, 
         localIdentName: '[path][name]-[local]' 
        }), 
        'postcss-loader?parser=postcss-scss' 
       ] 
      }, 
      { test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=100000' }    
     ] 
    }, 
    postcss: function (webpack) { 
     return [ 
      stripInlineComments 
      , require('postcss-fontpath' , {checkPath: true}) 
      , font 
      , precss 
      , autoprefixer 
      , require('postcss-simple-vars') 
      , require('postcss-nested' 
       , autoprefixer({browsers: ['last 2 versions']})) 
     ]; 
    } 
}; 

錯誤消息

ERROR in ./~/css-loader?importLoaders&modules=true&importLoaders=1&localIdentName=%5Bpath%5D%5Bname%5D-%5Blocal%5D!./~/postcss-loader?parser=postcss-scss!./src/client/scss/main.css 
Module not found: Error: Cannot resolve 'file' or 'directory' ../../../client/font/fontello.eot in C:\var\www\webpack-express-boilerplate\src\client\scss 
@ ./~/css-loader?importLoaders&modules=true&importLoaders=1&localIdentName=%5Bpath%5D%5Bname%5D-%5Blocal%5D!./~/postcss-loader?parser=postcss-scss!./src/client/scss/main.css 6:876-929 6:955-1008 

Answer 1

好只是所以它很容易讓人們看到我做了什麼得到它這裏是工作：

我認爲這是我更容易完全刪除scss，只需使用css模塊即可。這似乎有很大幫助。

我用git@github.com：christianalfoni/webpack-express-boilerplate.git來幫助我指導自己。知道我有一個工作的東西，實際上教會了我比在webpack之前學到的更多的東西。正如你可以猜到這不是很多：D

另一個主要的變化，真正幫助改變路徑並不令人意外。但這些都是相對於output.path之前的路徑性別而言的，但我認爲這是相對於wepack.config.js而言的，並不是說從那裏開始，所有內容都將被視爲文檔根目錄，即使對於html和css也是如此。

**關鍵部分:) **

我也有更新我的快遞成立，因爲我沒有給它一個express.static路徑...哦，我的愚蠢，我怎麼會錯過這樣一個基本事情..所以：

快速

app.use(express.static(__dirname + '/public/')); //Don't forget me :(

決賽CSS

/* Webfont: Lato-Black */@font-face { 
    font-family: 'LatoBlack'; 
    src: url('/font/Lato-Black.eot'); /* IE9 Compat Modes */ 
    src: url('/font/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('/font/Lato-Black.woff2') format('woff2'), /* Modern Browsers */ 
     url('/font/Lato-Black.woff') format('woff'), /* Modern Browsers */ 
     url('/font/Lato-Black.ttf') format('truetype'); 
    font-style: normal; 
    font-weight: normal; 
    text-rendering: optimizeLegibility; 
} 

Wekpack.config

'use strict'; 
var path = require('path'); 
var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var qs = require('querystring'); 
var precss = require('precss'); 
var autoprefixer = require('autoprefixer'); 
var stripInlineComments = require('postcss-strip-inline-comments'); 

module.exports = { 
    devtool: 'eval-source-map', 
    // resolve: { modulesDirectories: ['node_modules'], extension: ['', '.js', '.css'] }, 
    entry: [ 
     'webpack-hot-middleware/client?reload=true', 
     path.join(__dirname, 'src/client/js/Kindred') 
     // path.join(__dirname, 'app/main') 
    ], 
    output: { 
     path: path.join(__dirname, '/public/'), 
     filename: '[name].js', 
     publicPath: '/' 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: 'public/index.tpl.html', 
      inject: 'body', 
      filename: 'index.html' 
     }), 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin(), 
     new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': JSON.stringify('development') 
     }) 
    ], 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       loader: 'babel', 
       query: {"presets": ["react", "es2015", "stage-0", "react-hmre"]} 
      }, { 
       test: /\.json?$/, 
       loader: 'json' 
      }, 
      { 
       test: /\.jpg$/, loader: "file-loader" 
      }, 
      { 
       test: /\.css$/, 
       loaders: [ 
        'style-loader', 
        'css-loader?importLoaders&' + qs.stringify({ 
         modules: true, 
         importLoaders: 1, 
         localIdentName: '[path][name]-[local]' 
        }), 
        'postcss-loader?parser=postcss-scss' 
       ] 
      }, 
      // Font Definitions 
      { test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=font/[name].[ext]' }, 
      { test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=font/[name].[ext]' }, 
      { test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=font/[name].[ext]' }, 
      { test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=font/[name].[ext]' }, 
      { test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=font/[name].[ext]' } 
     ] 
    }, 
    postcss: function (webpack) { 
     return [ 
      stripInlineComments 
      , precss 
      , autoprefixer 
      , require('postcss-simple-vars') 
      , require('postcss-nested' 
      , autoprefixer({browsers: ['last 2 versions']})) 
     ]; 
    } 
}; 

我還張貼了這個答案一個一個問題。他們都非常密切相關，但卻有不同的問題。所以我認爲可以再發布一次。

我想對所有嘗試過的人說抱歉。我覺得我到最後很遙遠。我只是發佈這個incase任何人都有類似的問題。我從中得到的只是使用那個鍋爐板。或者因爲這個原因，html內部的靜態部分和parths。