Eu tenho uma grande quantidade de arquivos javascript divididos em 4 subdiretórios em meu aplicativo. No grunhido, pego todos eles e os compilo em um arquivo. Esses arquivos não têm uma função module.exports.
Quero usar o webpack e dividi-lo em 4 partes. Não quero entrar manualmente e exigir todos os meus arquivos.
Gostaria de criar um plug-in que, na compilação, percorra as árvores de diretório, pegue todos os nomes e caminhos de arquivo .js e, em seguida, exija todos os arquivos nos subdiretórios e os adicione à saída.
Quero que todos os arquivos em cada diretório sejam compilados em um módulo que eu possa solicitar de meu arquivo de ponto de entrada ou incluir nos recursos que http://webpack.github.io/docs/plugins.html menciona.
Ao adicionar um novo arquivo, quero apenas colocá-lo no diretório correto e saber que será incluído.
Existe uma maneira de fazer isso com o webpack ou um plugin que alguém escreveu para fazer isso?
fonte
image-size-loader
para todas as imagens a fim de criar espaços reservados com proporções corretas.loaders: [ { test: /\.json$/, loader: 'json' } ]
.{ test: /\.json$/, loader: 'json' }
adiciona o carregador json para arquivos .json, contanto que você tenha instalado o carregador.require.context(...)
(por exemplo, se você estiver tentando exigir tudo em várias pastas), o webpack irá lançar um aviso. Os argumentosrequire.context
devem ser constantes de tempo de compilação.require-context
é um invólucrowebpack
e sua amostra é retirada dawebpack
documentação do em webpack.js.org/guides/dependency-management/#context-module-api - que foi adicionado em 2016 (em github.com/webpack/ webpack.js.org/commit/… ), também depois de escrever minha resposta ... Talvez os redatores do webpack tenham sido influenciados por minha resposta. Observe que eles o expandiram para ter cache.No arquivo do meu aplicativo acabei colocando o requerer
cortesia desta postagem: https://github.com/webpack/webpack/issues/118
Agora está adicionando todos os meus arquivos. Eu tenho um carregador para html e css e parece funcionar muito bem.
fonte
expr
neste exemplo?expr
é um caminho para um único arquivo dentro da pasta de contexto. portanto, se você precisar fazer isso não apenas para exigir todos os arquivos html, isso é útil. webpack.github.io/docs/context.html#context-module-apiexpr
argumento baseado está fazendo aqui, mesmo depois de olhar os documentos do webpack. o que significa "fazer isso não apenas para exigir todos os arquivos html"? obrigadoexpr
significa aquiQue tal um mapa de todos os arquivos em uma pasta?
Faça isso:
fonte
Exemplo de como obter um mapa de todas as imagens na pasta atual.
fonte
Todos os méritos para @splintor (obrigado).
Mas aqui está minha própria versão derivada.
Benefícios:
{module_name: exports_obj}
objeto.Código (versão original):
Exemplo:
Saída de amostra para eventual
console.log(allModules);
:Árvore do diretório:
Código (versão profunda):
Exemplo:
Resultado do exemplo anterior usando esta versão:
fonte
isso funciona para mim:
NOTA: isso pode exigir arquivos .js em subdiretórios de ./js/ recursivamente.
fonte