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

165

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.

spb
fonte

Respostas:

220

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.

Yeo
fonte
Eu não correr o trecho, algum erro ou erro de digitação pode ocorrer
Yeo
Eu executei seu snippet, funciona como um encanto ... Surpreendido, ninguém viu isso, eh desenvolvedores de front-end, sem paciência, sempre com pressa ;-). Exporto as configurações da mesma maneira, mas minha declaração é diferente / padrão: var config = {entry: SOURCE_DIR + '/index.jsx', ....} Não usei nenhum compilador também: - \
Beringela
Ou você pode simplesmente fazer um webpack && cp etc em npm?
SuperUberDuper
1
Isso é muito útil para implantar um pacote npm na pasta original (existem testes automáticos), mas também na pasta do aplicativo que implementa o pacote. Dessa forma, posso pular a etapa de download do npm e testar ao vivo meu código de pacote atualizado até que a nova versão esteja estável e pronta para ser publicada no npm.
Adrian Moisa
<pre> <code> var config = {// TODO: Adicione um módulo de configuração comum: {},}; </code> </pre> O module{}objeto está incorreto. Não é necessário. Ele será estendido / fundiram no mesmo nível como palavras-chave name, entry, output(a partir de seu exemplo). <pre> <code> {module: {mode: "development", devtool: "source-map"}}, nome: "a", entrada: "./a/app", saída: {path: "/ a ", nome do arquivo:" bundle.js "}} </code> </pre>
Rob Waa
249

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
zhengkenghong
fonte
4
No meu caso, quero que uma saída não contenha chunkhash, existe alguma solução simples para isso? Obrigado.
raRaRa
1
@zhengkenghong Eu acredito que o caminho de saída gerado precisaria distnele. Portanto, em vez de module/a/index.jsser um caminho de saída, deveria ser. module/a/dist/index.jsOu então, você está substituindo seus arquivos de entrada.
dance2die
1
A distpasta @Sung já está configurada no caminho de saída. Então o arquivo gerado seria realmente o dist/module/a/index.jsque eu não mencionei.
zhengkenghong
4
Eu acho que essa deve ser a resposta aceita, pois é a resposta do webpack 4 docs. -> webpack.js.org/concepts/output/#multiple-entry-points
Será
1
@raRaRa Tarde para a festa, mas você pode fazer isso usando uma função para output.filenameconforme documentado aqui: webpack.js.org/configuration/output/#outputfilename
Thomas
22

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
cmswalker
fonte
@ccnixon está documentado aqui webpack.js.org/configuration/output/#outputfilename seach para "ainda permitido".
John Henckel
3

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

sanjsanj
fonte
3

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/',
        }],
      },
    }),
],
Alexander
fonte
1

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.

ex-zac-tly
fonte
obrigado. vou deixar o Q para o caso de alguém conseguir uma solução alternativa.
Spb 9/16
qual é o seu caso de uso para exigir 2 caminhos de saída? Parece que você deseja 2 aplicativos ou 1 aplicativo e 1 módulo.
ex-zac-TLY
Eu pensei que precisava de um que fosse dedicado à saída gerada pelo carregador de arquivos, que estava entrando na raiz do projeto, enquanto eu o queria em sua própria pasta. Acabei redirecionando o caminho de saída no próprio carregador de acordo com a minha resposta abaixo.
spb
1
Isto não é completamente verdade. Você pode tecnicamente especificar apenas um caminho de saída, mas será aplicada para cada chave em um objeto de entrada, permitindo que você tenha várias saídas - webpack.js.org/concepts/entry-points
sanjsanj
0

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;
spb
fonte
1
Não sei se isso ainda é um problema para você, mas ter um olhar para npmjs.com/package/webpack-entry-plus
sanjsanj