Estou tentando passar de Gulp
para Webpack
. No Gulp
tenho tarefa que copia todos os arquivos e pastas de / static / folder para / build / folder. Como fazer o mesmo com Webpack
? Preciso de algum plugin?
javascript
webpack
Vitalii Korsakov
fonte
fonte
Respostas:
Você não precisa copiar as coisas, o webpack funciona diferente do gulp. O Webpack é um empacotador de módulos e tudo o que você referenciar em seus arquivos será incluído. Você só precisa especificar um carregador para isso.
Então, se você escrever:
O Webpack tentará primeiro analisar o arquivo referenciado como JavaScript (porque esse é o padrão). Claro, isso irá falhar. É por isso que você precisa especificar um carregador para esse tipo de arquivo. O arquivo - ou url-loader, por exemplo, pega o arquivo referenciado, coloca-o na pasta de saída do webpack (que deve estar
build
no seu caso) e retorna o URL do hash para esse arquivo.Normalmente, os carregadores são aplicados através da configuração do webpack:
Claro que você precisa instalar o carregador de arquivos primeiro para fazer isso funcionar.
fonte
Exigir ativos usando o módulo do carregador de arquivos é a maneira como o webpack deve ser usado ( origem ). No entanto, se você precisar de maior flexibilidade ou desejar uma interface mais limpa, também poderá copiar arquivos estáticos diretamente usando my
copy-webpack-plugin
( npm , Github ). Para suastatic
parabuild
exemplo:fonte
Se você deseja copiar seus arquivos estáticos, pode usar o carregador de arquivos desta maneira:
para arquivos html:
no webpack.config.js:
no seu arquivo js:
./static/ é relativo a onde está o seu arquivo js.
Você pode fazer o mesmo com imagens ou o que for. O contexto é um método poderoso para explorar !!
fonte
index.html
em um subdiretório que está criando chamado_
(sublinhado), o que está acontecendo?main.js
está importando tudo dentro dastatic
pasta:require.context("./static/", true, /^.*/);
Uma vantagem que o acima mencionado copy-webpack-plugin traz e que não foi explicado antes é que todos os outros métodos mencionados aqui ainda agrupam os recursos em seus arquivos de pacote configurável (e exigem que você os "exija" ou "importe" em algum lugar). Se eu quiser apenas mover algumas imagens ou partes do modelo, não quero desordenar meu arquivo de pacote javascript com referências inúteis a elas, só quero que os arquivos sejam emitidos no lugar certo. Não encontrei nenhuma outra maneira de fazer isso no webpack. É certo que não é para o que o webpack foi projetado originalmente, mas é definitivamente um caso de uso atual. (@BreakDS Espero que isso responda à sua pergunta - é apenas um benefício se você quiser)
fonte
As sugestões acima são boas. Mas, para tentar responder sua pergunta diretamente, sugiro usar
cpy-cli
um script definido em suapackage.json
.Este exemplo espera
node
para algum lugar no seu caminho. Instalecpy-cli
como uma dependência de desenvolvimento:npm install --save-dev cpy-cli
Em seguida, crie alguns arquivos nodejs. Um para fazer a cópia e o outro para exibir uma marca de seleção e uma mensagem.
copy.js
checkmark.js
Adicione o script
package.json
. Supondo que os scripts estejam em<project-root>/scripts/
Para executar o sript:
npm run copy
fonte
Provavelmente você deve usar o CopyWebpackPlugin, mencionado na resposta kevlened. Como alternativa para algum tipo de arquivo como .html ou .json, você também pode usar o raw-loader ou o json-loader. Instale-o via
npm install -D raw-loader
e, em seguida, o que você só precisa fazer é adicionar outro carregador ao nossowebpack.config.js
arquivo.Gostar:
Nota: Reinicie o webpack-dev-server para que quaisquer alterações na configuração entrem em vigor.
E agora você pode exigir arquivos html usando caminhos relativos, isso facilita muito a movimentação de pastas.
fonte
A maneira como carrego estática
images
efonts
:Não se esqueça de instalar
file-loader
para que isso funcione.fonte
logo.png
nem deve criar um nome de arquivo obtuso e "esperançosamente" exclusivo para evitar colisões globais. Mesmo motivo pelo qual usamos módulos CSS .[path][name].[ext]
e há uma abundância de flexibilidade previsto para modificar este para o ambiente específico ou caso de uso ... arquivo-loaderVocê pode escrever o bash no seu package.json:
fonte
"build": "webpack && xcopy images dist\\images\\ /S /Y && xcopy css dist\\css\\ /S /Y"
Eu também estava preso aqui. O copy-webpack-plugin funcionou para mim.
No entanto, 'copy-webpack-plugin' não era necessário no meu caso (aprendi mais tarde).
Webpack ignora caminhos raiz
exemplo
Portanto, para fazer isso funcionar sem usar 'copy-webpack-plugin', use '~' nos caminhos
'~' diz ao webpack para considerar 'imagens' como um módulo
nota: pode ser necessário adicionar o diretório pai do diretório de imagens em
Visite https://vuejs-templates.github.io/webpack/static.html
fonte
O arquivo de configuração do webpack (no webpack 2) permite exportar uma cadeia de promessas, desde que a última etapa retorne um objeto de configuração do webpack. Consulte os documentos de configuração da promessa . De lá:
Você pode criar uma função de cópia recursiva simples que copia seu arquivo e somente depois disso dispara o webpack. Por exemplo:
fonte
digamos que todos os seus recursos estáticos estão em uma pasta "estática" no nível raiz e você deseja copiá-los para a pasta de construção, mantendo a estrutura da subpasta e, em seguida, no seu arquivo de entrada) basta colocar
fonte