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