Question

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

My Original CSS（罗盘编译后的SASS）和字体具有以下结构

这里的font-face是正确的：

@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
       }
    ]
}

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

但我的字体（以及我的图片）现在有一个错误的网址（它在结构中没有上升）

@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

万一有人偶然发现它...... 我不得不改变

define( 'ABSPATH', dirname(dirname(dirname(__FILE__))) . '/vendor/wordpress/' );

我的cssloader

publicPath: ""

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

1 个答案: