将 webpack 配置为使用绝对路径而不是相对路径

Question

我在将 webpack 设置为使用绝对路径时遇到问题。问题是我无法弄清楚如何让我的字体的加载路径与它保存文件的实际位置相匹配。这是我的文件夹结构：

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

这就是我的 webpack 文件的样子。当我运行 webpack 时，它会正确地将字体文件添加到 public->font 中的正确位置，但是当我运行服务器时，它会尝试从以下位置获取字体：

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