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見つけ出す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 
     } 
    ] 
} 

私はそれらを配置したい場所を私のファイルがコピーされます。

しかし、私のフォント（と私のイメージは）今、誤った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: '/assets/dist' 

に私のcssloaderの

publicPath: "" 

を変更する必要がありました