Como criar vários caminhos de saída na configuração do Webpack

Alguém sabe como criar vários caminhos de saída em um arquivo webpack.config.js? Estou usando o bootstrap-sass, que vem com alguns arquivos de fonte diferentes, etc. Para o webpack processar esses arquivos, incluí o carregador de arquivos que está funcionando corretamente, no entanto, os arquivos que ele gera estão sendo salvos no caminho de saída especificado para o resto dos meus arquivos:

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

Eu gostaria de conseguir algo em que talvez eu possa olhar para os tipos de extensão para qualquer webpack que esteja produzindo e para coisas que terminem em .woff .eot, etc., desviá-las para um caminho de saída diferente. Isso é possível?

Eu pesquisei um pouco no Google e me deparei com essa questão * no github, onde algumas soluções são oferecidas, edite:

mas parece que você precisa conhecer o ponto de entrada capaz de especificar uma saída usando o método hash, por exemplo:

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

no entanto, no meu caso, no que diz respeito aos arquivos de fonte, o processo de entrada é meio que abstraído e tudo o que sei é a saída. no caso de meus outros arquivos sofrerem transformações, há um ponto conhecido em que exijo que eles sejam tratados pelos meus carregadores. se houvesse uma maneira de descobrir onde essa etapa estava acontecendo, eu poderia usar o método hash para personalizar os caminhos de saída, mas não sei onde esses arquivos estão sendo necessários.

Não tenho certeza se temos o mesmo problema, pois o webpack suporta apenas uma saída por configuração a partir de junho de 2016. Acho que você já viu o problema no Github .

Mas eu separo o caminho de saída usando o multi-compilador . (isto é, separando o objeto de configuração 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,       
];

Se você tiver uma configuração comum entre eles, poderá usar a biblioteca de extensão ou Object.assignno ES6 ou o {...}operador de propagação no ES7.

O Webpack suporta vários caminhos de saída.

Defina os caminhos de saída como a chave de entrada. E use o namemodelo como saída.

configuração do 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'
}

gerado:

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

Se você pode viver com vários caminhos de saída com o mesmo nível de profundidade e estrutura de pastas, existe uma maneira de fazer isso no webpack 2 (ainda não foi testado com o webpack 1.x)

Basicamente, você não segue as regras do documento e fornece um caminho para o nome do arquivo.

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

Isso levará essa estrutura de pastas

/-
  foo.js
  bar.js

E transformá-lo em

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

Eu escrevi um plugin que pode fazer o que você deseja, você pode especificar pontos de entrada conhecidos ou desconhecidos (usando glob ) e especificar saídas exatas ou gerá-las dinamicamente usando o caminho e o nome do arquivo de entrada. https://www.npmjs.com/package/webpack-entry-plus

Você definitivamente pode retornar uma série de configurações do seu arquivo webpack.config. Mas não é uma solução ideal se você deseja que apenas uma cópia dos artefatos esteja na pasta da documentação do seu projeto, pois faz com que o webpack construa seu código duas vezes duas vezes o tempo total de criação.

Nesse caso, eu recomendo usar o plugin FileManagerWebpackPlugin:

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

Você pode ter apenas um caminho de saída.

dos documentos https://github.com/webpack/docs/wiki/configuration#output

Opções que afetam a saída da compilação. As opções de saída informam ao Webpack como gravar os arquivos compilados no disco. Observe que, embora possa haver vários pontos de entrada, apenas uma configuração de saída é especificada.

Se você usar qualquer hash ([hash] ou [chunkhash]), certifique-se de ter uma ordem consistente dos módulos. Use o OccurenceOrderPlugin ou recordsPath.

Na verdade, acabei entrando no index.js no módulo do carregador de arquivos e mudando para onde o conteúdo foi emitido. Provavelmente, essa não é a solução ideal, mas até que haja outra maneira, tudo bem, pois sei exatamente o que está sendo tratado por esse carregador, que são apenas fontes.

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