配置 webpack 使用绝对路径而不是相对路径 [英] configure webpack to use absolute path instead of relative path

问题描述

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

I'm having an issue with setting webpack to use the absolute path. The problem is that I cannot figure out how to get both the load path for my fonts to match the actual spot that it saves the files. This is my folder structure:

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

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

This is what my webpack file looks like. When I run webpack, it correctly adds the font files to the right spot in public->font but when I run the server, it tries to fetch the font from:

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

代替:

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

可以看到它试图从 css 文件夹的相对路径而不是根目录进行查找.我怎样才能解决这个问题?谢谢！

You can see that it is trying to look from the relative path of the css folder instead of the root. How can I fix this? Thanks!

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

推荐答案

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

It tries to fetch css/public/font/font1.ttf because the output CSS reference it as ./public/font/font1.ttf as that's the name you gave it from the file-loader. The file-loader respects the output.publicPath option and will add it to the beginning of the assets import path. Setting output.publicPath to / will give you the desired path.

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

如果不想设置output.publicPath(虽然推荐)，也可以使用file-loader选项publicPath，仅针对给定规则进行配置.

If you don't want to set output.publicPath (although it is recommended), you can also use the file-loader option publicPath, to configure it just for the given rule.

您可以对配置进行的一个小改进是设置 output.path 到 public 因为您希望所有文件最终都在 public 目录中，所以您不必在每个文件名选项中指定它.为此，您还必须将 output.publicPath 更改为 /public/.

A small improvement you could make to your config is to set output.path to public because you want all files to end up in the public directory, so you don't have to specify it in every filename option. For this to work you'll also have to change output.publicPath to /public/.

以下配置产生相同的输出(也更改了规则以使用 webpack 2 语法):

The following config produces the same output (also changed the rules to use webpack 2 syntax):

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 使用绝对路径而不是相对路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！