¿Cómo copiar archivos estáticos para crear un directorio con Webpack?

Estoy tratando de pasar de Gulpa Webpack. En GulpTengo una tarea que copia todos los archivos y carpetas de / static / folder a / build / folder. ¿Cómo hacer lo mismo con Webpack? ¿Necesito algún complemento?

No necesita copiar cosas, el paquete web funciona de manera diferente que el trago. Webpack es un paquete de módulos y se incluirá todo lo que haga referencia en sus archivos. Solo necesita especificar un cargador para eso.

Entonces si escribes:

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

Webpack primero intentará analizar el archivo referenciado como JavaScript (porque ese es el valor predeterminado). Por supuesto, eso fallará. Es por eso que necesita especificar un cargador para ese tipo de archivo. El archivo , o el cargador de url, por ejemplo, toma el archivo al que se hace referencia, lo coloca en la carpeta de salida del paquete web (que debería estar builden su caso) y devuelve la url hash para ese archivo.

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

Por lo general, los cargadores se aplican a través de la configuración del paquete web:

// webpack.config.js

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

Por supuesto, primero debe instalar el cargador de archivos para que esto funcione.

Requerir activos utilizando el módulo cargador de archivos es la forma en que se pretende usar el paquete web ( fuente ). Sin embargo, si necesita una mayor flexibilidad o desea una interfaz más limpia, también puede copiar archivos estáticos directamente usando my copy-webpack-plugin( npm , Github ). Para su staticde buildejemplo:

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

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

Si desea copiar sus archivos estáticos, puede usar el cargador de archivos de esta manera:

para archivos html:

en webpack.config.js:

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

en su archivo js:

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

./static/ es relativo a donde está su archivo js.

Puedes hacer lo mismo con imágenes o lo que sea. ¡El contexto es un método poderoso para explorar!

Una ventaja que trae el plugin copy-webpack-plugin mencionado anteriormente que no se ha explicado antes es que todos los otros métodos mencionados aquí aún agrupan los recursos en sus archivos de paquete (y requieren que los "requiera" o "importe" en alguna parte). Si solo quiero mover algunas imágenes o algunos parciales de plantilla, no quiero saturar mi paquete de javascript con referencias inútiles, solo quiero que los archivos se emitan en el lugar correcto. No he encontrado ninguna otra forma de hacer esto en webpack. Es cierto que no es para lo que se diseñó originalmente el paquete web, pero definitivamente es un caso de uso actual. (@BreakDS Espero que esto responda a su pregunta, solo es un beneficio si lo desea)

Las sugerencias anteriores son buenas. Pero para tratar de responder a su pregunta directamente, le sugiero que use cpy-clien un script definido en su package.json.

Este ejemplo espera nodeen algún lugar de tu camino. Instalar cpy-clicomo una dependencia de desarrollo:

npm install --save-dev cpy-cli

Luego cree un par de archivos nodejs. Uno para hacer la copia y el otro para mostrar una marca de verificación y un mensaje.

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;

Agregue el script en package.json. Suponiendo que los scripts están en<project-root>/scripts/

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

Para ejecutar el sript:

npm run copy

Lo más probable es que deba usar CopyWebpackPlugin, que se mencionó en la respuesta kevlened. Alternativamente, para algún tipo de archivo como .html o .json , también puede usar raw-loader o json-loader. Instálelo a través de npm install -D raw-loadery luego lo único que debe hacer es agregar otro cargador a nuestro webpack.config.jsarchivo.

Me gusta:

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

Nota: Reinicie el servidor webpack-dev-server para que los cambios de configuración surtan efecto.

Y ahora puede requerir archivos html usando rutas relativas, esto hace que sea mucho más fácil mover carpetas.

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

La forma en que cargo estática imagesy 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/'
          },
        }
    ]
}

No olvides instalar file-loaderpara que funcione.

Puedes escribir bash en tu package.json:

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

Estaba atrapado aquí también. copy-webpack-plugin funcionó para mí.

Sin embargo, 'copy-webpack-plugin' no era necesario en mi caso (lo supe más tarde).

webpack ignora el
ejemplo de rutas raíz

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

Por lo tanto, para que esto funcione sin usar 'copy-webpack-plugin' use '~' en las rutas

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

'~' le dice a webpack que considere las 'imágenes' como un módulo

nota: es posible que deba agregar el directorio principal del directorio de imágenes en

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

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

El archivo de configuración de webpack (en webpack 2) le permite exportar una cadena de promesa, siempre que el último paso devuelva un objeto de configuración de webpack. Consulte los documentos de configuración de promesa . Desde allí:

webpack ahora admite devolver una Promesa desde el archivo de configuración. Esto permite realizar un procesamiento asíncrono en su archivo de configuración.

Puede crear una función de copia recursiva simple que copie su archivo, y solo después de eso se activa el paquete web. P.ej:

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

supongamos que todos sus activos estáticos están en una carpeta "estática" en el nivel raíz y desea copiarlos en la carpeta de compilación manteniendo la estructura de la subcarpeta, luego en su archivo de entrada) simplemente coloque

//index.js or index.jsx

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