Como copiar arquivos estáticos para criar diretório com o Webpack?

Estou tentando passar de Gulppara Webpack. No Gulptenho tarefa que copia todos os arquivos e pastas de / static / folder para / build / folder. Como fazer o mesmo com Webpack? Preciso de algum plugin?

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:

var myImage = require("./static/myImage.jpg");

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 buildno seu caso) e retorna o URL do hash para esse arquivo.

var myImage = require("./static/myImage.jpg");
console.log(myImage); // '/build/12as7f9asfasgasg.jpg'

Normalmente, os carregadores são aplicados através da configuração do webpack:

// webpack.config.js

module.exports = {
    ...
    module: {
        loaders: [
            { test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/, loader: "file" }
        ]
    }
};

Claro que você precisa instalar o carregador de arquivos primeiro para fazer isso funcionar.

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 sua staticpara buildexemplo:

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    context: path.join(__dirname, 'your-app'),
    plugins: [
        new CopyWebpackPlugin([
            { from: 'static' }
        ])
    ]
};

Se você deseja copiar seus arquivos estáticos, pode usar o carregador de arquivos desta maneira:

para arquivos html:

no webpack.config.js:

module.exports = {
    ...
    module: {
        loaders: [
            { test: /\.(html)$/,
              loader: "file?name=[path][name].[ext]&context=./app/static"
            }
        ]
    }
};

no seu arquivo js:

  require.context("./static/", true, /^\.\/.*\.html/);

./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 !!

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)

As sugestões acima são boas. Mas, para tentar responder sua pergunta diretamente, sugiro usar cpy-clium script definido em sua package.json.

Este exemplo espera nodepara algum lugar no seu caminho. Instale cpy-clicomo 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

#!/usr/bin/env node

var shelljs = require('shelljs');
var addCheckMark = require('./helpers/checkmark');
var path = require('path');

var cpy = path.join(__dirname, '../node_modules/cpy-cli/cli.js');

shelljs.exec(cpy + ' /static/* /build/', addCheckMark.bind(null, callback));

function callback() {
  process.stdout.write(' Copied /static/* to the /build/ directory\n\n');
}

checkmark.js

var chalk = require('chalk');

/**
 * Adds mark check symbol
 */
function addCheckMark(callback) {
  process.stdout.write(chalk.green(' ✓'));
  callback();
}

module.exports = addCheckMark;

Adicione o script package.json. Supondo que os scripts estejam em<project-root>/scripts/

...
"scripts": {
  "copy": "node scripts/copy.js",
...

Para executar o sript:

npm run copy

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-loadere, em seguida, o que você só precisa fazer é adicionar outro carregador ao nosso webpack.config.jsarquivo.

Gostar:

{
    test: /\.html/,
    loader: 'raw'
}

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.

template: require('./nav.html')  

A maneira como carrego estática imagese fonts:

module: {
    rules: [
      ....

      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        /* Exclude fonts while working with images, e.g. .svg can be both image or font. */
        exclude: path.resolve(__dirname, '../src/assets/fonts'),
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'images/'
          }
        }]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
        /* Exclude images while working with fonts, e.g. .svg can be both image or font. */
        exclude: path.resolve(__dirname, '../src/assets/images'),
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/'
          },
        }
    ]
}

Não se esqueça de instalar file-loaderpara que isso funcione.

Você pode escrever o bash no seu package.json:

# package.json
{
  "name": ...,
  "version": ...,
  "scripts": {
    "build": "NODE_ENV=production npm run webpack && cp -v <this> <that> && echo ok",
    ...
  }
}

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

<img src="/images/logo.png'>

Portanto, para fazer isso funcionar sem usar 'copy-webpack-plugin', use '~' nos caminhos

<img src="~images/logo.png'>

'~' 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

resolve: {
    modules: [
        'parent-directory of images',
        'node_modules'
    ]
}

Visite https://vuejs-templates.github.io/webpack/static.html

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á:

O webpack agora suporta o retorno de uma promessa do arquivo de configuração. Isso permite fazer o processamento assíncrono no seu arquivo de configuração.

Você pode criar uma função de cópia recursiva simples que copia seu arquivo e somente depois disso dispara o webpack. Por exemplo:

module.exports = function(){
    return copyTheFiles( inpath, outpath).then( result => {
        return { entry: "..." } // Etc etc
    } )
}

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

//index.js or index.jsx

require.context("!!file?name=[path][name].[ext]&context=./static!../static/", true, /^\.\/.*\.*/);