javascript - configurar - ¿Cómo copiar archivos estáticos para construir un directorio con Webpack?

como configurar webpack

Question

Estoy tratando de pasar de Gulp a Webpack . En Gulp tengo 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 plugin?

Answer 1

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

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

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

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

Answer 2

Las sugerencias anteriores son buenas. Pero para tratar de responder a su pregunta directamente, sugeriría usar cpy-cli en un script definido en su package.json .

Este ejemplo espera que el node esté en algún lugar de su ruta Instale cpy-cli como una dependencia de desarrollo:

npm install --save-dev cpy-cli

A continuación, 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

Answer 3

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

Me gusta:

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

Nota: Reinicie el 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'')  

Answer 4

No necesitas copiar cosas, el webpack funciona de forma diferente a trago. Webpack es un paquete de módulos y se incluirá todo lo que hace referencia en sus archivos. Solo necesitas especificar un cargador para eso.

Así que si escribes:

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

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

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

Normalmente 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.

Answer 5

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",
    ...
  }
}

Answer 6

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

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

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

Answer 7

Si desea copiar sus archivos estáticos, puede utilizar 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 poderoso método para explorar!

Answer 8

Una de las ventajas que trae el complemento copy-webpack-plugin que no se ha explicado anteriormente es que todos los otros métodos mencionados aquí todavía agrupan los recursos en sus archivos de paquetes (y requieren que los "solicite" o los "importe" en algún lugar). Si solo quiero mover algunas imágenes o algunos parciales de la plantilla, no quiero saturar mi archivo de 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 el paquete web. Es cierto que no es para lo que originalmente se diseñó 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)

Answer 9

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

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

El paquete web ignora las rutas raíz
ejemplo

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

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

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

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

nota: es posible que tenga que 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

Answer 10

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

//index.js or index.jsx

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