Webpack 2 CSS 字体和图像路径错误

Question

我的 WebPack2 配置有问题，因为它将字体和图像放在我想要的目录中，但它使 CSS url 指向另一个目录..

我的原创CSS（SASS经过罗盘编译后）和字体结构如下

这里的字体是正确的：

@font-face {
 font-family: 'FS Albert Web Regular';
 src: url("../fonts/FSAlbertWeb-Regular.eot");
 src: url("../fonts/FSAlbertWeb-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/FSAlbertWeb-Regular.woff2") format("woff2"), url("../fonts/FSAlbertWeb-Regular.woff") format("woff");
 font-weight: normal;
 font-style: normal;
}
.
.
.

我需要 css 的 javascript 位于此处

并且有 css 要求：

require("../../css/app.css");

我的webpack配置是这样的

var PRODUCTION = process.env.NODE_ENV === "production";

const cssIdentifier = PRODUCTION
  ? '[hash:base64:10]'
  : '[path][name]--[local]';

const cssLoader = PRODUCTION
    ? ExtractTextPlugin.extract({
        fallback: "style-loader",
        publicPath: "",
        use: 'css-loader?localIdentName=' + cssIdentifier
    })
    : [
      { loader: 'style-loader' },
      {
          loader: 'css-loader?localIdentName=' + cssIdentifier,
          options: { sourceMap: true }
      }
    ];

module.exports = {
    entry: {
        "header": './assets/campus/common/js/_deployment/header.js'
    },
    output: {
        path: path.resolve(__dirname, './assets/dist'),
        publicPath: '/assets/dist',
        filename: '[name].bundle.js',
        chunkFilename: "[name].commons.js"
    },
    module: {
        rules: [
        {
           test: /\.vue$/,
           loader: 'vue-loader',
           options: {
              // vue-loader options go here
           }
        },
        {
           test: /\.js$/,
           loader: 'babel-loader',
           exclude: /node_modules/
        },
        {
           test: /\.(eot|svg|ttf|woff|woff2)$/,
           loader: 'file-loader',
           options: {
              name: './font/[name].[ext]'
           },
           exclude: /node_modules/
        },
        {
           test: /\.(png|jpg|gif|svg)$/,
           loader: 'file-loader',
           options: {
              name: './img/[name].[ext]?[hash]'
           }
       },
       {
           test: /\.css$/,
           use: cssLoader
       }
    ]
}

我的文件被复制到我想要的地方：

但是我的字体（和我的图像）现在有一个错误 Url（它没有在结构中上升）

@font-face{
    font-family:FS Albert Web Regular;
    src:url(./font/FSAlbertWeb-Regular.eot);
    src:url(./font/FSAlbertWeb-Regular.eot?#iefix) format("embedded-opentype"),url(./font/FSAlbertWeb-Regular.woff2) format("woff2"),url(./font/FSAlbertWeb-Regular.woff) format("woff");
    font-weight:400;
    font-style:normal}

我做错了什么？

感谢您的帮助

Answer 1

以防万一有人无意中发现它.... 我不得不改变

publicPath: ""

我的 cssloader 到

publicPath: '/assets/dist'

Webpack 2 CSS 字体和图像路径错误

Webpack 2 CSS with wrong path to font and images

javascript

webpack

webpack-2