WebPack + WordPress Theme - Configuração com saída de múltiplos .css independentes de .js

[allysonsouza]

Estou tentando realizar uma configuração do WebPack para dar saída aos scripts e estilos utilizados em um tema WordPress. Entendi o funcionamento do WebPack, seu esquema de fazer um bundle com .js/.css/imagens o que vier um um .js só, entretanto como estou trabalhando com WordPress é importante manter o funcionamento padrão da plataforma que faz o carregamento e um gerenciamento de dependências próprio com suas funções wp_enqueue_scripts e wp_enqueue_styles.

Consegui resolver esta questão utilizando o ExtractTextPlugin, configuro uma instância e um padrão de loader para cada arquivo, o que acredito ser péssimo dada a repetição de código. Outro ponto é a performance: 15s.

Com essas informações, o que eu poderia fazer?

• Há uma melhor configuração do WebPack para o que estou precisando, mais performática, sem repetição de código?
• O ideal nesse caso seria ficar com um task runner/npm scripts mesmo?

Gist | webpack.config.js

[doug2k1]

Você pode remover a repetição usando múltiplos entrypoints, tipo isso: https://gist.github.com/doug2k1/5654a6801024ec01b7b3fa3ea929e9f3

O único problema é que o Webpack vai criar um bundle pra cada entrypoint, e no caso do CSS, como ele vai ser extraído, serão criados bundles sem código. No meu exemplo aí ele vai gerar 5 arquivos:

admin.css
base.css
bundle-admin.js
bundle-base.js
bundle-main.js

Esses bundle-admin e bundle-base são arquivos inúteis, sem código (só tem código boilerplate do Webpack).

Outra opção seria usar scripts NPM mesmo.

[allysonsouza]

Obrigado @doug2k1, para o quê estou buscando acho que o WebPack não se aplica, a temas convencionais mesmo, seria subverter demais o propósito da ferramenta. Não me agrada gerar arquivos inúteis só porquê não tenho opção para o que preciso, e muito menos demorar 15s de execução na minha proposta inicial.

Me recomendaram também quebrar em ambiente dev e prod, onde só quando fosse ir para produção executaria os loaders do ExtractTextPlugin e geraria os arquivos .css, porém também não sinto que é o caminho.

Vou ficar com npm e/ou Gulp por hora, deixar WebPack para um tema que vá utilizar Vue/React e REST API do WordPress.

Obrigado!