Comment copier des fichiers statiques pour créer un répertoire avec Webpack?

J'essaie de passer de Gulpà Webpack. Dans GulpJ'ai une tâche qui copie tous les fichiers et dossiers du dossier / static / vers le dossier / build / . Comment faire de même avec Webpack? Ai-je besoin d'un plugin?

Vous n'avez pas besoin de copier les choses, le webpack fonctionne différemment de gulp. Webpack est un module de regroupement et tout ce que vous référencez dans vos fichiers sera inclus. Il vous suffit de spécifier un chargeur pour cela.

Donc, si vous écrivez:

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

Webpack essaiera d'abord d'analyser le fichier référencé en JavaScript (car c'est la valeur par défaut). Bien sûr, cela échouera. C'est pourquoi vous devez spécifier un chargeur pour ce type de fichier. Le fichier - ou le chargeur d' url, par exemple, prend le fichier référencé, le place dans le dossier de sortie de webpack (qui devrait être builddans votre cas) et renvoie l'url hachée pour ce fichier.

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

Les chargeurs sont généralement appliqués via la configuration du webpack:

// webpack.config.js

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

Bien sûr, vous devez d'abord installer le chargeur de fichiers pour que cela fonctionne.

Exiger des ressources à l'aide du module de chargement de fichiers est la façon dont le webpack est destiné à être utilisé ( source ). Cependant, si vous avez besoin d'une plus grande flexibilité ou souhaitez une interface plus propre, vous pouvez également copier des fichiers statiques directement à l'aide de my copy-webpack-plugin( npm , Github ). Pour staticd' buildexemple:

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

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

Si vous souhaitez copier vos fichiers statiques, vous pouvez utiliser le chargeur de fichiers de cette manière:

pour les fichiers html:

dans webpack.config.js:

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

dans votre fichier js:

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

./static/ est relatif à l'emplacement de votre fichier js.

Vous pouvez faire de même avec des images ou autre chose. Le contexte est une méthode puissante à explorer !!

Un avantage que le plugin copy-webpack-plugin susmentionné apporte qui n'a pas été expliqué auparavant est que toutes les autres méthodes mentionnées ici regroupent toujours les ressources dans vos fichiers de bundle (et vous obligent à "exiger" ou "importer" quelque part). Si je veux simplement déplacer des images ou des modèles partiels, je ne veux pas encombrer mon fichier de bundle javascript avec des références inutiles, je veux juste que les fichiers soient émis au bon endroit. Je n'ai trouvé aucun autre moyen de le faire dans webpack. Certes, ce n'est pas pour cela que le webpack a été conçu à l'origine, mais c'est certainement un cas d'utilisation actuel. (@BreakDS J'espère que cela répond à votre question - ce n'est qu'un avantage si vous le souhaitez)

Les suggestions ci-dessus sont bonnes. Mais pour essayer de répondre directement à votre question, je suggère d'utiliser cpy-cliun script défini dans votre package.json.

Cet exemple s'attend nodeà quelque part sur votre chemin. Installer en cpy-clitant que dépendance de développement:

npm install --save-dev cpy-cli

Créez ensuite quelques fichiers nodejs. L'un pour faire la copie et l'autre pour afficher une coche et un message.

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;

Ajoutez le script package.json. En supposant que les scripts sont dans<project-root>/scripts/

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

Pour exécuter le script:

npm run copy

Vous devriez probablement utiliser CopyWebpackPlugin qui a été mentionné dans la réponse kevlened. Alternativement pour certains types de fichiers comme .html ou .json, vous pouvez également utiliser raw-loader ou json-loader. Installez-le via npm install -D raw-loaderet ce que vous n'avez qu'à faire est d'ajouter un autre chargeur à notre webpack.config.jsfichier.

Comme:

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

Remarque: redémarrez le webpack-dev-server pour que les modifications de configuration prennent effet.

Et maintenant, vous pouvez exiger des fichiers html en utilisant des chemins relatifs, ce qui facilite beaucoup le déplacement des dossiers.

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

La façon dont je charge statique imageset 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'oubliez pas d'installer file-loaderpour que cela fonctionne.

Vous pouvez écrire bash dans votre package.json:

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

J'étais coincé ici aussi. copy-webpack-plugin a fonctionné pour moi.

Cependant, 'copy-webpack-plugin' n'était pas nécessaire dans mon cas (j'ai appris plus tard).

webpack ignore l'
exemple des chemins racine

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

Par conséquent, pour que cela fonctionne sans utiliser 'copy-webpack-plugin', utilisez '~' dans les chemins

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

'~' demande à webpack de considérer les 'images' comme un module

remarque: vous devrez peut-être ajouter le répertoire parent du répertoire images dans

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

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

Le fichier de configuration webpack (dans webpack 2) vous permet d'exporter une chaîne de promesses, tant que la dernière étape renvoie un objet de configuration webpack. Voir les documents de configuration des promesses . De là:

webpack prend désormais en charge le retour d'une promesse à partir du fichier de configuration. Cela permet de faire un traitement asynchrone dans votre fichier de configuration.

Vous pouvez créer une simple fonction de copie récursive qui copie votre fichier, et seulement après avoir déclenché le webpack. Par exemple:

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

permet de dire que tous vos actifs statiques sont dans un dossier "statique" au niveau racine et que vous souhaitez les copier dans le dossier de construction en conservant la structure du sous-dossier, puis dans votre fichier d'entrée)

//index.js or index.jsx

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