Comment créer plusieurs chemins de sortie dans la configuration Webpack

Quelqu'un sait-il comment créer plusieurs chemins de sortie dans un fichier webpack.config.js? J'utilise bootstrap-sass qui est livré avec quelques fichiers de polices différents, etc. Pour que webpack les traite, j'ai inclus un chargeur de fichiers qui fonctionne correctement, mais les fichiers qu'il génère sont enregistrés dans le chemin de sortie spécifié pour le reste de mes fichiers:

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

J'aimerais réaliser quelque chose où je pourrais peut-être regarder les types d'extensions pour n'importe quel webpack en sortie et pour les choses se terminant par .woff .eot, etc., les faire détourner vers un chemin de sortie différent. Est-ce possible?

J'ai fait un peu de recherche sur Google et suis tombé sur ce * problème sur github où quelques solutions sont proposées, éditez:

mais il semble que vous ayez besoin de connaître le point d'entrée pour pouvoir spécifier une sortie en utilisant 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, en ce qui concerne les fichiers de polices, le processus d'entrée est en quelque sorte abstrait et tout ce que je sais, c'est la sortie. dans le cas de mes autres fichiers subissant des transformations, il y a un point connu où je demande qu'ils soient ensuite traités par mes chargeurs. s'il y avait un moyen de savoir où se déroulait cette étape, je pourrais alors utiliser la méthode de hachage pour personnaliser les chemins de sortie, mais je ne sais pas où ces fichiers sont requis.

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

Mais je sépare le chemin de sortie en utilisant le multi-compilateur . (c'est-à-dire séparer 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 la bibliothèque d' extension ou Object.assigndans ES6 ou l' {...}opérateur de propagation dans ES7.

Webpack prend en charge plusieurs chemins de sortie.

Définissez les chemins de sortie comme clé d'entrée. Et utilisez le namecomme modèle de sortie.

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

généré:

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

Si vous pouvez vivre avec plusieurs chemins de sortie ayant le même niveau de profondeur et la même structure de dossiers, il existe un moyen de le faire dans webpack 2 (vous n'avez pas encore testé avec webpack 1.x)

En gros, vous ne suivez pas les règles de la doc et vous fournissez un chemin 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
    }
};

Cela prendra cette structure de dossier

/-
  foo.js
  bar.js

Et transformez-le en

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

J'ai écrit un plugin qui peut, espérons-le, faire ce que vous voulez, vous pouvez spécifier des points d'entrée connus ou inconnus (en utilisant glob ) et spécifier des sorties exactes ou les générer dynamiquement en utilisant le chemin et le nom du fichier d'entrée. https://www.npmjs.com/package/webpack-entry-plus

Vous pouvez certainement renvoyer un tableau de configurations à partir de votre fichier webpack.config. Mais ce n'est pas une solution optimale si vous voulez simplement qu'une copie des artefacts se trouve dans le dossier de la documentation de votre projet, car cela permet à Webpack de créer votre code en doublant le temps total de construction.

Dans ce cas, je recommanderais d'utiliser le plugin FileManagerWebpackPlugin à la place:

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

Vous ne pouvez avoir qu'un seul chemin de sortie.

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

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

Si vous utilisez un hachage ([hash] ou [chunkhash]), assurez-vous d'avoir un ordre cohérent des modules. Utilisez OccurenceOrderPlugin ou recordsPath.

En fait, je me suis contenté d'aller dans index.js dans le module de chargement de fichiers et de changer l'endroit où le contenu était émis. Ce n'est probablement pas la solution optimale, mais jusqu'à ce qu'il y ait un autre moyen, cela me convient car je sais exactement ce qui est géré par ce chargeur, qui n'est que des polices.

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