将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

它试图获取css/public/font/font1.ttf因为输出CSS引用它作为./public/font/font1.ttf因为这是你从file-loader给了它的名字。 file-loader尊重output.publicPath选项，并将其添加到资产导入路径的开头。将output.publicPath设置为/将为您提供所需的路径。

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

如果你不想设置output.publicPath（但建议），你也可以使用file-loader选项publicPath，对其进行配置，只为给定的规则。

---

小的改进，你可以让你的配置是设置output.path到public，因为你要的所有文件到公共目录中结束，所以你不必在每个文件名选项来指定。为此，您还必须将output.publicPath更改为/public/。

以下配置产生相同的输出（也改变了规则，使用的WebPack 2语法）：

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') 
    ] 
};