相対パスの代わりに絶対パスを使用するようにwebpackを設定してください

Question

絶対パスを使用するようにwebpackを設定する際に問題があります。問題は、フォントのロードパスとファイルを保存する実際の場所との両方を取得する方法を理解できないことです。これは私のフォルダ構造です：

public 
    font 
    font1 
    font2 
    css 
    index.css 
src 
    font 
    font1 
    font2 
    css 
    index.scss 
webpack.config.js 

これは私のWebpackファイルの外観です。私はWebPACKのを実行すると、それが正しく公的>フォントの右スポットにフォントファイルを追加しますが、私は、サーバーを実行すると、それはからフォントを取得しようとします：

http://localhost:8080/css/public/font/font1.ttf

の代わり：

http://localhost:8080/font/font1.tff

これは、ルートではなくcssフォルダの相対パスから見ようとしていることがわかります。これをどうすれば解決できますか？ありがとう！

module.exports = { 
    entry: { 
     index: './src/javascript/index.js' 
    }, 
    output: { 
     filename: './public/javascript/[name].js', 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.scss$/, 
       use: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: ['css-loader', 'sass-loader'] 
       }) 
      }, 
         { 
          test: /\.(eot|svg|ttf|woff|woff2)$/, 
          loader: 'file-loader?name=./public/font/[name].[ext]' 
         }, 
         { 
          test: /\.(jpg|png)$/, 
          loader: 'file-loader?name=./public/image/[name].[ext]' 
         } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('public/css/index.css') 
    ] 
}; 

Answer 1

それはあなたがfile-loaderからそれを与えた名前だとして出力CSSが./public/font/font1.ttfとしてそれを参照するので、それはcss/public/font/font1.ttfをフェッチしようとします。 file-loaderはoutput.publicPathオプションを尊重し、アセットのインポートパスの先頭に追加します。 output.publicPathから/に設定すると、目的のパスが得られます。

output: { 
    filename: './public/javascript/[name].js', 
    publicPath: '/', 
}, 

あなたは（それが推奨されますが）output.publicPathを設定したくない場合は、単に与えられたルールのためにそれを設定するには、file-loaderオプションpublicPathを使用することができます。あなたの設定に作ることができ

---

小さな改善では、すべてのファイルを公開ディレクトリに終わるしたいのでpublicにoutput.pathを設定することですので、あなたはすべてのfilenameオプションで指定する必要はありません。これを行うには、output.publicPathを/public/に変更する必要があります。これは、実際にどのように動作するかを明確にするために時間を割いてくれてありがとうそんなに、

const path = require('path'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: { 
     index: './src/javascript/index.js' 
    }, 
    output: { 
     path: path.resolve(__dirname, 'public'), 
     filename: 'javascript/[name].js', 
     publicPath: '/public/', 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.scss$/, 
       use: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: ['css-loader', 'sass-loader'] 
       }) 
      }, 
      { 
       test: /\.(eot|svg|ttf|woff|woff2)$/, 
       loader: 'file-loader', 
       options: { 
        name: 'font/[name].[ext]' 
       } 
      }, 
      { 
       test: /\.(jpg|png)$/, 
       loader: 'file-loader', 
       options: { 
        name: 'image/[name].[ext]' 
       } 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('css/index.css') 
    ] 
};