feat: support multiple publicPaths

[dxcqcv]

it will have two type of URL, fonts and img, but publicPath only can set all in one path

so does anyway to make multiple publicPath options to make folder cleaner?

like

{
  test: /\.css$/,
  exclude: ['/node_modules/'],
  loader: ExtractTextPlugin.extract('style',['css'],{publicPath:{font:'fonts/',img:'img/'})
},

now my solution is combined loader?&name=path and publicPath like:

'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: [
        {
        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:'.'})
      },
      /********* 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'])
      },
      /********* 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
  }
};

because my folder tree is

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

[BleemIs42]

I set publicPath: '../', the result is ../images, but publicPath: '../../' result is ../images too. Is't a bug?

[michael-ciniawsky]

ETWP entered maintenance mode and won't receive any feature updates, please open an issue in mini-css-extract-plugin instead