web-dev-qa-db-fra.com

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 contient quelques fichiers de polices différents, etc. Pour que Webpack les traite, j'ai inclus le chargeur de fichiers qui fonctionne correctement, mais les fichiers qu'il génère sont enregistrés dans le chemin de sortie que j'ai spécifié. le reste de mes fichiers: 

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

J'aimerais réaliser quelque chose pour lequel je peux peut-être examiner les types d'extensions pour tout type de Webpack en sortie et pour les éléments se terminant par .woff .eot, etc., de les faire rediriger vers un chemin de sortie différent. Est-ce possible? 

J'ai fait une petite recherche sur Google et suis tombé sur ce problème * sur github où quelques solutions sont proposées, edit: 

mais il semble que vous ayez besoin de connaître le point d'entrée pour pouvoir spécifier une sortie à l'aide de la méthode de hachage 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 de saisie est un peu abstrait et tout ce que je sais, c'est la sortie. dans le cas de mes autres fichiers en cours de transformation, il existe un point connu pour lequel je les demande à être ensuite gérés par mes chargeurs. s'il y avait un moyen de savoir où cette étape se passait, 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. 

pathoutputconfigwebpackloader
111
spb

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

Mais je sépare le chemin de sortie en utilisant le multi-compilateur . (c'est-à-dire en séparant 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 entre eux, vous pouvez utiliser l’opérateur extend library ou Object.assign dans ES6 ou l’opérateur {...} dans ES7.

154
Yeo

Webpack prend en charge plusieurs chemins de sortie.

Définissez les chemins de sortie comme clé d’entrée. Et utilisez la name comme modèle de sortie.

config 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
166
zhengkenghong

Si vous pouvez vivre avec plusieurs chemins de sortie ayant le même niveau de profondeur et la même structure de dossier, il existe un moyen de le faire dans Webpack 2 (il reste à tester 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 le transformer en

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

J'ai écrit un plugin qui, espérons-le, peut 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

2
sanjsanj

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

depuis docs 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.

2
ex-zac-tly

En fait, je me suis contenté d'aller dans index.js dans le module de chargeur de fichiers et de modifier l'emplacement de diffusion du contenu. Ce n'est probablement pas la solution optimale, mais jusqu'à ce qu'il y ait un autre moyen, c'est très bien, 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;
0
spb