extract-text-webpack-plugin publicPath options does not work

Question

I use font-awesome-webpack to load font-awesome and my webpack.config.js is

'use strict';

const webpack = require('webpack');

const siteRoot = '_site';
// for browserSync
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
// for clean folders before building
const CleanWebpackPlugin = require('clean-webpack-plugin');
// for creation of HTML
const HtmlWebpackPlugin = require('html-webpack-plugin');
// for extract css
const ExtractTextPlugin = require('extract-text-webpack-plugin');


// path
const path = require('path');
const PATHS = {
  app: path.join(__dirname, 'src'),
  bin: path.join(__dirname, '')
};

// for get multiple entry list
function getEntryList (type) {
  let glob = require('glob');
  let fileList = [];

  let entryList = glob.sync(PATHS.app+'/**/*.'+type).reduce(function(o,v,i) {
    let regex = /([^\/]+)(?=\.\w+$)/;
    let index = v.match(regex)[0];
    o[index] = v;
    return o;
  },{});
  return entryList;
} 

/**
 * loop multiple files
 */
let entryHtmlPlugins = Object.keys(getEntryList('pug')).map(function(entryName){
  let v = getEntryList('pug')[entryName]; // get full path
  let filenamePath = v.split(/src\/([^.]*)/)[1] +'.html';
  let templatePath = v.split(/(src\/.*)/)[1];
  // filter chunks config
  let chunkList = [];
  switch(entryName){
    case 'default':
      chunkList.push('commons','index');
  }
  return new HtmlWebpackPlugin({
    filename: filenamePath,
    chunks: chunkList,
    template: templatePath
  })
});

module.exports = {
  entry: getEntryList('ts'),
  output: {
    path: PATHS.bin,
//    publicPath: '{{site.baseurl}}/',
    publicPath: './',
    filename: 'js/[name]-[hash:8].js'
  },
      // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js","styl"]
    },
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'jshint'
      }
    ],
    loaders: [
      /********* css to js */
      {
        test: /\.css$/,
        exclude: ['/node_modules/'],
        loader: ExtractTextPlugin.extract('style',['css'],{publicPath:'./fonts/'})
      },
      /********* pug to js */
      {
        test:/\.pug$/,
        exclude: /node_modules/,
        loader: 'pug-html-loader',
        query: {
          pretty: true
        }
      },
      /********* ts to js */
      {
        test:/\.ts$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
      },
      /********* stylus to css*/
      {
        test: /\.styl$/,
        exclude: ['/node_modules/','/src/css/includes/'],
        loader: ExtractTextPlugin.extract('style',['css','stylus'])
      },
            // the url-loader uses DataUrls. 
      // the file-loader emits files. 
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
      ,
      /********* url loader*/
      {
        test: /\.(png|jpg)$/,
        exclude: /node_modules/,
        loader: 'url-loader?limit=8192&name=[name]-[hash:8].[ext]'
      }
    ]
  },
  watch: true,
  plugins: [
    /** clean folders */
    new CleanWebpackPlugin(['css','js','_site/js','_site/css'],{
      root: __dirname,
      verbose: true,
      dry: false 
    }),
    /** commonsPlugin */
    new webpack.optimize.CommonsChunkPlugin("commons", "js/commons-[hash:8].js"),
    /** extract css */
    new ExtractTextPlugin('css/[name]-[hash:8].css'),
    new BrowserSyncPlugin({
      files: [siteRoot + '/**'],
      host: 'localhost',
      port: 3000,
      server: { baseDir: [siteRoot] }
    },{reload:true})
  ].concat(entryHtmlPlugins),
  jshint: {
    esversion: 6
  }
};

I just wanna use font-awesome, but the url path in the css always wrong, the output css like:

@font-face {
  font-family: 'FontAwesome';
  src: url(./fonts/25a32416abee198dd821b0b17a198a8f.eot);
  src: url(./fonts/25a32416abee198dd821b0b17a198a8f.eot?#iefix&v=4.6.3) format('embedded-opentype'), url(./fonts/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2) format('woff2'), url(./fonts/c8ddf1e5e5bf3682bc7bebf30f394148.woff) format('woff'), url(./fonts/1dc35d25e61d819a9c357074014867ab.ttf) format('truetype'), url(./fonts/d7c639084f684d66a1bc66855d193ed8.svg#fontawesomeregular) format('svg');
  font-weight: normal;
  font-style: normal;
}

and the output fonts file is in ./ but not ./fonts/.

It means the output fonts always use publicPath of output, but not ExtractTextPlugin.extract('style',['css'],{publicPath:'./fonts/'}). What am I doing wrong?

Answer 1

I fixed it, the solution is change file path by URL-loader?name=path, because ExtractTextPlugin only can change CSS URL path.

but if your CSS URL path wanna match your URL path you can tweak your publicPath in your ExtractTextPlugin.

for example:

your folder tree is like

root
|
|__CSS
|
|__fonts
|
|__src
|
|__js

in webpack config like

    loaders: [
        {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff&name=./fonts/[name]-[hash].[ext]"
      }, {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff&name=./fonts/[name]-[hash].[ext]"
      }, {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/octet-stream&name=./fonts/[name]-[hash].[ext]"
      }, {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file?&name=./fonts/[name]-[hash].[ext]"
      }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=image/svg+xml&name=./fonts/[name]-[hash].[ext]"
      },
      /********* css to js */
      {
        test: /\.css$/,
        exclude: ['/node_modules/'],
        loader: ExtractTextPlugin.extract('style',['css'],{publicPath:'.'})
      },

Reference:

[1]How to configure font file output directory from font-awesome-webpack in webpack?

[2]https://github.com/webpack/extract-text-webpack-plugin/issues/213