Question

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

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

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

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，仅针对给定规则对其进行配置。< / p>

您可以对配置进行的一项小改进是将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')
    ]
};

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

1 个答案: