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

我的WebPack2的配置有问题，因为它将字体和图像放在我想要的目录中，但它使得CSS URL指向另一个目录。Webpack 2与错误的字体和图像路径的CSS

我原来的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; 
} 
. 
. 
.

，我需要的JavaScript我的CSS是定位d这里

并具有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}

我在做什么错？

感谢您的帮助

来源

2017-03-06 CodeHacker

万一有人在它绊倒.... 我不得不把

publicPath: ""

我cssloader的

改变

publicPath: '/assets/dist'

来源

2017-03-21 16:00:58 CodeHacker

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

回答

相关问题