Come creare più percorsi di output nella configurazione di Webpack

Qualcuno sa come creare più percorsi di output in un file webpack.config.js? Sto usando bootstrap-sass che viene fornito con alcuni file di font diversi, ecc. Per il webpack per elaborare questi ho incluso il caricatore di file che funziona correttamente, tuttavia i file che emette vengono salvati nel percorso di output per cui ho specificato il resto dei miei file:

    output: {
      path: __dirname + "/js",
      filename: "scripts.min.js"
    }

Mi piacerebbe ottenere qualcosa in cui potrei forse guardare i tipi di estensione per qualsiasi Webpack in uscita e per le cose che finiscono in .woff .eot, ecc., Li abbia deviati su un diverso percorso di output. È possibile?

Ho fatto un po 'di googling e ho riscontrato questo * problema su github, dove sono offerte un paio di soluzioni, modifica:

ma sembra che sia necessario conoscere il punto di ingresso per poter specificare un output usando il metodo hash, ad es .:

var entryPointsPathPrefix = './src/javascripts/pages';
var WebpackConfig = {
  entry : {
    a: entryPointsPathPrefix + '/a.jsx',
    b: entryPointsPathPrefix + '/b.jsx',
    c: entryPointsPathPrefix + '/c.jsx',
    d: entryPointsPathPrefix + '/d.jsx'
  },

  // send to distribution
  output: {
    path: './dist/js',
    filename: '[name].js'
  }
}

* https://github.com/webpack/webpack/issues/1189

tuttavia nel mio caso, per quanto riguarda i file dei caratteri, il processo di input è un po 'sottratto e tutto ciò che so è l'output. nel caso di altri miei file sottoposti a trasformazioni, c'è un punto noto in cui sto richiedendo che vengano gestiti dai miei caricatori. se ci fosse un modo per scoprire dove stava succedendo questo passaggio, potrei quindi usare il metodo hash per personalizzare i percorsi di output, ma non so dove siano richiesti questi file.

Non sono sicuro che abbiamo lo stesso problema poiché il webpack supporta solo un output per configurazione a partire da giugno 2016. Immagino che tu abbia già visto il problema su Github .

Ma separo il percorso di output usando il multi-compilatore . (cioè separando l'oggetto di configurazione di webpack.config.js).

var config = {
    // TODO: Add common Configuration
    module: {},
};

var fooConfig = Object.assign({}, config, {
    name: "a",
    entry: "./a/app",
    output: {
       path: "./a",
       filename: "bundle.js"
    },
});
var barConfig = Object.assign({}, config,{
    name: "b",
    entry: "./b/app",
    output: {
       path: "./b",
       filename: "bundle.js"
    },
});

// Return Array of Configurations
module.exports = [
    fooConfig, barConfig,       
];

Se si dispone di una configurazione comune tra loro, è possibile utilizzare la libreria di estensione o Object.assignin ES6 o l' {...}operatore di diffusione in ES7.

Webpack supporta più percorsi di output.

Impostare i percorsi di output come chiave di accesso. E usa il namemodello di output.

configurazione webpack:

entry: {
    'module/a/index': 'module/a/index.js',
    'module/b/index': 'module/b/index.js',
},
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
}

generato:

└── module
    ├── a
    │   └── index.js
    └── b
        └── index.js

Se riesci a vivere con più percorsi di output con lo stesso livello di profondità e struttura delle cartelle, c'è un modo per farlo nel webpack 2 (devi ancora testare con il webpack 1.x)

Fondamentalmente non segui le regole del documento e fornisci un percorso per il nome del file.

module.exports = {
    entry: {
      foo: 'foo.js',
      bar: 'bar.js'
    },

    output: {
      path: path.join(__dirname, 'components'),
      filename: '[name]/dist/[name].bundle.js', // Hacky way to force webpack   to have multiple output folders vs multiple files per one path
    }
};

Ciò richiederà questa struttura di cartelle

/-
  foo.js
  bar.js

E trasformalo in

/-
  foo.js
  bar.js
  components/foo/dist/foo.js
  components/bar/dist/bar.js

Ho scritto un plugin che si spera possa fare quello che vuoi, puoi specificare punti di ingresso noti o sconosciuti (usando glob ) e specificare output esatti o generarli dinamicamente usando il percorso e il nome del file di voce. https://www.npmjs.com/package/webpack-entry-plus

Puoi sicuramente restituire un array di configurazioni dal tuo file webpack.config. Ma non è una soluzione ottimale se si desidera solo che una copia degli artefatti si trovi nella cartella della documentazione del progetto, poiché consente al webpack di creare il proprio codice due volte, raddoppiando il tempo complessivo di costruzione.

In questo caso, consiglierei invece di utilizzare il plug-in FileManagerWebpackPlugin:

const FileManagerPlugin = require('filemanager-webpack-plugin');
// ...
plugins: [
    // ...
    new FileManagerPlugin({
      onEnd: {
        copy: [{
          source: './dist/*.*',
          destination: './public/',
        }],
      },
    }),
],

Puoi avere solo un percorso di output.

dai documenti https://github.com/webpack/docs/wiki/configuration#output

Opzioni che influenzano l'output della compilation. le opzioni di output indicano a Webpack come scrivere i file compilati su disco. Si noti che mentre possono esserci più punti di ingresso, viene specificata solo una configurazione di output.

Se usi hashing ([hash] o [chunkhash]) assicurati di avere un ordinamento coerente dei moduli. Utilizzare OccurenceOrderPlugin o recordsPath.

In realtà sono finito semplicemente andando in index.js nel modulo caricatore di file e cambiando la posizione in cui venivano emessi i contenuti. Questa probabilmente non è la soluzione ottimale, ma fino a quando non c'è un altro modo, va bene poiché so esattamente cosa viene gestito da questo caricatore, che è solo caratteri.

//index.js
var loaderUtils = require("loader-utils");
module.exports = function(content) {
    this.cacheable && this.cacheable();
    if(!this.emitFile) throw new Error("emitFile is required from module system");
    var query = loaderUtils.parseQuery(this.query);
    var url = loaderUtils.interpolateName(this, query.name || "[hash].[ext]", {
        context: query.context || this.options.context,
        content: content,
        regExp: query.regExp
    });
    this.emitFile("fonts/"+ url, content);//changed path to emit contents to "fonts" folder rather than project root
    return "module.exports = __webpack_public_path__ + " + JSON.stringify( url) + ";";
}
module.exports.raw = true;