Come copiare file statici per creare directory con Webpack?

Sto provando a passare da Gulpa Webpack. In GulpHo compito che copia tutti i file e cartelle da / static / cartella / build / cartella. Come fare lo stesso con Webpack? Ho bisogno di alcuni plugin?

Non è necessario copiare cose in giro, il webpack funziona in modo diverso da gulp. Webpack è un modulo bundler e tutto ciò che farai riferimento nei tuoi file verrà incluso. Devi solo specificare un caricatore per questo.

Quindi se scrivi:

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

Webpack tenterà innanzitutto di analizzare il file di riferimento come JavaScript (perché è quello predefinito). Certo, ciò fallirà. Ecco perché è necessario specificare un caricatore per quel tipo di file. Il file - o url-loader, ad esempio, prende il file di riferimento, lo inserisce nella cartella di output del webpack (che dovrebbe essere buildnel tuo caso) e restituisce l'URL con hash per quel file.

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

Di solito i caricatori vengono applicati tramite la configurazione del webpack:

// webpack.config.js

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

Ovviamente devi prima installare il caricatore di file per farlo funzionare.

La richiesta di risorse utilizzando il modulo caricatore di file è il modo in cui si intende utilizzare il webpack ( fonte ). Tuttavia, se hai bisogno di maggiore flessibilità o desideri un'interfaccia più pulita, puoi anche copiare i file statici direttamente usando my copy-webpack-plugin( npm , Github ). Per la vostra staticper buildesempio:

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

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

Se vuoi copiare i tuoi file statici puoi usare il caricatore di file in questo modo:

per i file html:

in webpack.config.js:

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

nel tuo file js:

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

./static/ è relativo alla posizione del file js.

Puoi fare lo stesso con le immagini o altro. Il contesto è un metodo potente da esplorare !!

Un vantaggio che il summenzionato plug-in copy-webpack porta che non è stato spiegato in precedenza è che tutti gli altri metodi menzionati qui raggruppano ancora le risorse nei file bundle (e richiedono di "richiederli" o "importarli" da qualche parte). Se voglio solo spostare alcune immagini o alcuni template parziali, non voglio ingombrare il mio file bundle javascript con riferimenti inutili ad essi, voglio solo che i file vengano emessi nel posto giusto. Non ho trovato nessun altro modo per farlo nel webpack. È vero che non è stato progettato per il webpack originariamente, ma è sicuramente un caso d'uso attuale. (@BreakDS spero che questo risponda alla tua domanda - è solo un vantaggio se lo vuoi)

I suggerimenti sopra sono buoni. Ma per provare a rispondere direttamente alla tua domanda ti suggerirei di usarlo cpy-cliin uno script definito nel tuopackage.json .

Questo esempio prevede nodeun punto del percorso. Installa cpy-clicome dipendenza di sviluppo:

npm install --save-dev cpy-cli

Quindi crea un paio di file nodejs. Uno per eseguire la copia e l'altro per visualizzare un segno di spunta e un messaggio.

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;

Aggiungi lo script in package.json. Supponendo che gli script siano presenti<project-root>/scripts/

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

Per eseguire lo script:

npm run copy

Molto probabilmente dovresti usare CopyWebpackPlugin che è stato menzionato nella risposta kevlened. In alternativa per alcuni tipi di file come .html o .json è anche possibile utilizzare raw-loader o json-loader. Installalo tramite npm install -D raw-loadere quindi non ti resta che aggiungere un altro caricatore al nostro webpack.config.jsfile.

Piace:

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

Nota: riavviare webpack-dev-server per rendere effettive eventuali modifiche alla configurazione.

E ora puoi richiedere file html usando percorsi relativi, questo rende molto più facile spostare le cartelle.

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

Il modo in cui carico statico 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/'
          },
        }
    ]
}

Non dimenticare di installare file-loaderper farlo funzionare.

Puoi scrivere bash nel tuo package.json:

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

Anche io ero bloccato qui. copy-webpack-plugin ha funzionato per me.

Tuttavia, nel mio caso "copy-webpack-plugin" non era necessario (l'ho imparato in seguito).

webpack ignora l'
esempio dei percorsi di root

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

Quindi, per farlo funzionare senza usare 'copy-webpack-plugin' usa '~' nei percorsi

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

'~' dice al webpack di considerare 'images' come un modulo

nota: potrebbe essere necessario aggiungere la directory principale della directory images in

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

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

Il file di configurazione del webpack (nel webpack 2) consente di esportare una catena di promesse, purché l'ultimo passaggio restituisca un oggetto di configurazione del webpack. Consulta i documenti di configurazione delle promesse . Da li:

webpack ora supporta la restituzione di una Promessa dal file di configurazione. Ciò consente di eseguire l'elaborazione asincrona nel file di configurazione.

È possibile creare una semplice funzione di copia ricorsiva che copia il file e solo successivamente si attiva il webpack. Per esempio:

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

diciamo che tutte le risorse statiche si trovano in una cartella "statica" a livello di root e si desidera copiarle nella cartella build mantenendo la struttura della sottocartella, quindi nel file di immissione) basta inserire

//index.js or index.jsx

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