Comment créer plusieurs chemins de sortie dans Webpack config

Personne ne sait comment créer plusieurs chemins de sortie dans un webpack.config.js fichier? Je suis en utilisant bootstrap-sass qui est livré avec un peu différents fichiers de police, etc. Pour webpack à ces processus, j'ai inclus le fichier loader qui fonctionne correctement, cependant les fichiers il les résultats sont enregistrés sur le chemin de la sortie, j'ai spécifié pour le reste de mes fichiers: 

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

J'aimerais réaliser quelque chose où je peux peut-être regarder les types d'extension pour quelque webpack est sortie et pour que les choses se terminant en .woff .eot, etc, ont leur détournés vers un autre chemin de sortie. Est-ce possible?

J'ai fait une petite recherche sur google et suis tombé sur cette *question sur github, où un couple de solutions sont proposées, edit:

mais il semble que si vous avez besoin de savoir le point d'entrée en mesure de préciser une sortie à l'aide de la méthode de hachage
par exemple: 

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

cependant dans mon cas, d'autant que les fichiers de police sont concernés, le processus de participation est le genre de disparaît et tout ce que je sais est la sortie. dans le cas de mes autres fichiers subissant des transformations, il est un point où je suis d'exiger d'eux pour être ensuite traitées par mes chargeurs. si il y avait un moyen de trouver où cette étape qui se passait, je pourrais ensuite utiliser la méthode de hachage pour personnaliser les chemins de sortie, mais je ne sais pas où ces fichiers sont requis.

InformationsquelleAutor spb | 2016-03-09
  1. 171

    Je ne sais pas si nous avons le même problème depuis webpack ne supportent qu'une seule sortie par configuration à partir de Juin 2016. Je suppose que vous avez déjà vu le question sur Github.

    Mais j'ai séparé le chemin de la sortie à l'aide de la multi-compilateur. (c'est à dire la séparation de l'objet de configuration de 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,       
];

    Si vous avez une configuration commune parmi eux, vous pouvez utiliser le étendre bibliothèque ou Object.assign dans l'ES6 ou {...} propagation de l'opérateur dans l'ES7.

    • Je n'ai pas couru le fragment de code, une erreur ou une faute de frappe peut se produire
    • J'ai fait exécuter votre extrait de code, fonctionne comme un charme... sans Surprise repéré ce, hein frontend développeurs, pas de patience, toujours pressé ;-). - Je exporter des configs de la même façon, mais ma déclaration est différent/standard: var config = { entrée: SOURCE_DIR + '/index.jsx', .... } Ne pas utiliser un multi compilateur :-\
    • Ou vous pouvez simplement faire un webpack && cp etc en npm?
    • C'est très utile pour moi, pour déployer un package npm à la fois dans le dossier d'origine (tests automatiques sont là) mais également dans le dossier de l'application que met en œuvre le paquet. De cette façon, je ne peux ignorer le mécanisme national de prévention de téléchargement étape et de test en direct de mon package de mise à jour de code jusqu'à ce que la nouvelle version est stable et prêt à être publié sur npm.
    • <pre><code> var config = { // TODO: Ajoutez de la commune de Configuration de module: {}, }; </code></pre> Le module{} objet est incorrect. Il n'est pas nécessaire. Il sera étendu/fusionné au même niveau que les mots-clés name, entry, output (à partir de votre exemple). <pre><code> { module: { mode: "développement", outil développeur d'internet explorer: "la source de la carte" } }, nom: "un", entrée: "./un/app", sortie: { path: "/a", filename: "bundle.js" } } </code></pre>
    InformationsquelleAutor Yeo
  2. 193

    Webpack prend en charge plusieurs chemins de sortie.

    Ensemble les chemins de sortie que de l'entrée de la clé. Et l'utilisation de la name comme modèle de sortie.

    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'
}

    généré:

    └── module
    ├── a
    │   └── index.js
    └── b
        └── index.js
    • Dans mon cas, je veux une sortie à ne pas contenir de chunkhash, est-il une solution simple pour qui? Merci.
    • Je crois que le chemin de sortie aurait besoin dist en elle. Ainsi, au lieu de module/a/index.js être un chemin de sortie, il devrait être module/a/dist/index.js Ou autre, vous personnalisez vos fichiers d'entrée.
    • le dossier est déjà configuré dans le chemin de la sortie. Si le fichier généré sera effectivement dist/module/a/index.js, que je n'avais pas mentionné.
    • J'obtiens: ERROR in Entry module not found: Error: Can't resolve 'src/js/app.js' lors de l'utilisation: entry: { 'src/js/app': "src/js/app.js"}
    • Je pense que cela devrait être la accepté de répondre que c'est la réponse de la webpack 4 docs. -> webpack.js.org/concepts/output/#multiple-entry-points
    • Cette fonction est documentée nulle part?!? J'avais en quelque sorte obtenu un non-plat sortie de la structure de travail en faisant le chemin de la sortie de __dirname + '/dist/js'), puis dans les plugins, faire des choses comme new CopyWebpackPlugin([{ from: "./src/img/", to: "../img" }]) pour copier des fichiers à /dist/img/, mais alors que la confusion dans les autres plugins, comme zip-webpack-plugin. En ajoutant le chemin de la sortie à l'entrée de la clé semble être la seule chose qui fonctionne de manière fiable.
    • La fin de la partie, mais vous pouvez le faire en utilisant une fonction de output.filename, comme indiqué ici: webpack.js.org/configuration/output/#outputfilename

    InformationsquelleAutor zhengkenghong
  3. 18

    Si vous pouvez vivre avec de multiples chemins de sortie ayant le même niveau de profondeur et de la structure de dossier il y a un moyen de le faire dans webpack 2 (ai pas encore tester avec webpack 1.x)

    Fondamentalement, vous ne suivez pas la doc de règles et de vous fournir un chemin d'accès pour le nom de fichier.

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

    Que prendra cette structure de dossiers

    /-
  foo.js
  bar.js

    Et de le transformer en

    /-
  foo.js
  bar.js
  components/foo/dist/foo.js
  components/bar/dist/bar.js
    InformationsquelleAutor cmswalker
  4. 2

    Vous ne pouvez avoir qu'un chemin de sortie.

    de la documentation https://github.com/webpack/docs/wiki/configuration#output

    Options affectant la sortie de la compilation. les options de sortie de raconter Webpack comment écrire les fichiers compilés sur le disque. Remarque, que si il peut y avoir plusieurs points d'entrée, une seule configuration de sortie est spécifié.

    Si vous utilisez l'un de hachage ([hash] ou [chunkhash]) assurez-vous d'avoir un ensemble cohérent de commande de modules. Utiliser le OccurenceOrderPlugin ou recordsPath.

    • merci. je vais laisser le Q juste au cas où quelqu'un pourrait être en mesure de venir avec une solution de contournement.
    • quelle est votre cas d'utilisation pour exiger que les 2 chemins de sortie? Il semble que vous voulez 2 applications ou 1 domaine d'application et 1 module.
    • j'ai pensé que j'avais besoin d'un dédié à la sortie générée par le fichier-chargeur, qui était d'aller à la racine du projet alors que je voulais qu'il soit dans son propre dossier. je me suis retrouvé juste de rediriger le chemin de sortie dans le chargeur lui-même par ma réponse ci-dessous.
    • Ce n'est pas tout à fait vrai. Vous pouvez techniquement uniquement spécifier un chemin de sortie, mais il s'applique pour chaque clé dans l'entrée de l'objet, vous permettant d'avoir plusieurs sorties -- webpack.js.org/concepts/entry-points
    InformationsquelleAutor ex-zac-tly
  5. 2

    J'ai écrit un plugin qui, j'espère, faire ce que vous voulez, vous pouvez spécifier connus ou inconnus points d'entrée (à l'aide de glob) et spécifier exacte de sorties ou de générer dynamiquement en utilisant l'entrée du chemin d'accès au fichier et le nom. https://www.npmjs.com/package/webpack-entry-plus

    InformationsquelleAutor sanjsanj
  6. 0

    Je l'ai fait à la liquidation de la juste aller dans index.js dans le fichier-chargeur de module et de l'évolution où les contenus ont été émis. Ce n'est probablement pas la solution optimale, mais jusqu'à il y a une autre façon, c'est très bien, depuis que je sais exactement ce qui est manipulé par ce chargeur, qui est juste de polices de caractères.

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