Come creare più percorsi di output in Webpack config

Question

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 specificato per il resto dei miei file:

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

vorrei realizzare qualcosa in cui posso forse guardare i tipi di estensione per qualsiasi webpack è l'output e per le cose che terminano in .woff .eot, ecc, li hanno dirottati a un diverso percorso di uscita. È possibile?

ho fatto un po 'googling e sono imbattuto in questo * problema su github dove sono offerti un paio di soluzioni, edit:

ma sembra come se avete bisogno di sapere il punto di ingresso in grado di specificare un output utilizzando il metodo hash esempio:

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

però nel mio caso, per quanto riguarda i file di font sono interessati, il processo di ingresso è parente d di abstracted away e tutto quello che so è l'output. nel caso dei miei altri file sottoposti a trasformazioni, c'è un punto noto in cui li sto richiedendo per essere poi gestito dai miei caricatori. se ci fosse un modo per scoprire dove stava succedendo questo passaggio, potrei quindi utilizzare il metodo hash per personalizzare i percorsi di output, ma non so dove siano richiesti questi file.

Answer 1

Non sono sicuro se abbiamo lo stesso problema dal momento che Webpack supporta solo un output per configurazione al momento. Immagino tu abbia già visto lo issue on Github.

Ma io separo il percorso di uscita utilizzando lo multi-compiler. (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,  \t 
 
];

Se si dispone di configurazione comune tra di loro, si potrebbe utilizzare la libreria extend o Object.assign in ES6 o {...} operatore diffusione in ES7.

Answer 2

È possibile avere solo un output sentiero.

dalla documentazione https://github.com/webpack/docs/wiki/configuration#output

Opzioni che influenzano l'uscita della compilation. Le opzioni di output dicono a Webpack come scrivere i file compilati sul disco. Si noti che mentre possono esserci più punti di ingresso, viene specificata una sola configurazione di uscita.

Se si utilizza un hashing ([hash] o [chunkhash]) assicurarsi di avere un ordine coerente dei moduli. Utilizzare l'OccurenceOrderPlugin o recordsPath.

Answer 3

In realtà mi sono ritrovato nel file index.js nel modulo del caricatore di file e nel modificare dove sono stati emessi i contenuti. Probabilmente questa non è la soluzione ottimale, ma finché non c'è un altro modo, questo va bene poiché so esattamente cosa viene gestito da questo loader, che è solo un font.

//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; 

Answer 4

Se si può vivere con percorsi di uscita multiple avere lo stesso livello di profondità e struttura delle cartelle c'è un modo per fare questo in webpack 2 (devono ancora provare con webpack 1.x)

Fondamentalmente si don' t seguire le regole del doc e fornire 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 
    } 
}; 

che avrà questa struttura di cartelle

/- 
    foo.js 
    bar.js 

e trasformarlo in

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

Answer 5

Webpack supporta percorsi di uscita multiple.

Impostare i percorsi di uscita come chiave di accesso. E utilizzare lo name come modello di output.

webpack config:

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 

Answer 6

ho scritto un plugin che si spera possa fare ciò che si vuole, è possibile specificare conosciuto o punti di ingresso sconosciuti (utilizzando glob) e specificare esatto genera o genera dinamicamente usando il percorso e il nome del file di immissione. https://www.npmjs.com/package/webpack-entry-plus

Answer 7

È possibile creare più configurazioni (unione-unione) con il valore di diffrenza nel percorso di uscita propety.