plugin - webpack html loader

Webpack.config cómo copiar el index.html a la carpeta dist

Question

Estoy tratando de automatizar los activos que entran / dist. Tengo el siguiente config.js:

module.exports = {
  context: __dirname + "/lib",
  entry: {
    main: [
      "./baa.ts"
    ]
  },
  output: {
    path: __dirname + "/dist",
    filename: "foo.js"
  },
  devtool: "source-map",
  module: {
    loaders: [
      {
        test: //.ts$/,
        loader: ''awesome-typescript-loader''
      },
      { test: //.css$/, loader: "style-loader!css-loader" }
    ]
  },
  resolve: {
    // you can now require(''file'') instead of require(''file.js'')
    extensions: ['''', ''.js'', ''.json'']
  }
}

También quiero incluir main.html del directorio que se encuentra al lado de / lib, en la carpeta / dist cuando ejecute webpack. ¿Cómo puedo hacer esto?

ACTUALIZACIÓN 1 2017_____________

Mi forma favorita de hacer esto ahora es usar el html-webpack-plugin con un archivo de plantilla. Gracias a la respuesta aceptada también! ¡La ventaja de esta manera es que el archivo de índice también tendrá el enlace js cachbusted agregado de fábrica!

Answer 1

Agregaré una opción a la respuesta de VitalyB:

Opción 3

Vía npm. Si ejecuta sus comandos a través de npm, puede agregar esta configuración a su package.json (consulte también el webpack.config.js allí). Para desarrollar run npm start , no es necesario copiar index.html en este caso porque el servidor web se ejecutará desde el directorio de archivos de origen, y el bundle.js estará disponible desde el mismo lugar (el bundle.js vivirá en la memoria solo pero estará disponible como si estuviera ubicado junto con index.html). Para la ejecución de producción, npm run build y una carpeta dist contendrá su bundle.js y index.html se copia con el viejo comando cp, como puede ver a continuación:

"scripts": {
    "test": "NODE_ENV=test karma start",
    "start": "node node_modules/.bin/webpack-dev-server --content-base app",
    "build": "NODE_ENV=production node node_modules/.bin/webpack && cp app/index.html dist/index.html"
  }

Actualización: Opción 4

Hay una copy-webpack-plugin , como se describe en esta respuesta de

Pero, en general, excepto por el "primer" archivo (como index.html) y los activos más grandes (como imágenes grandes o videos), incluya css, html, imágenes, etc. directamente en su aplicación a través de require y webpack lo incluirá para usted (bueno, después de configurarlo correctamente con cargadores y posiblemente complementos).

Answer 2

Esto funciona bien en Windows:

1. npm install --save-dev copyfiles
2. En package.json tengo una tarea de copia: "copy": "copyfiles -u 1 ./app/index.html ./deploy"

Esto mueve mi index.html de la carpeta de la aplicación a la carpeta de implementación.

Answer 3

Para copiar un archivo index.html ya existente en el directorio dist , simplemente puede usar HtmlWebpackPlugin especificando la fuente index.html como plantilla .

npm install copy-webpack-plugin --save-dev

El archivo dist/index.html creado será básicamente el mismo que su archivo fuente, con la diferencia de que webpack inyecta recursos agrupados como archivos .js con etiquetas <script> . La minificación y otras opciones se pueden configurar y documentar en github .

Answer 4

Para extender la respuesta de @ hobbeshunter si desea tomar solo index.html, también puede usar CopyPlugin. La principal motivación para usar este método sobre el uso de otros paquetes es porque es una pesadilla agregar muchos paquetes para cada tipo y configurarlo, etc. La forma más fácil es usar CopyPlugin para todo:

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

module.exports = {
  plugins: [
    new CopyPlugin([
      { from: ''static'', to: ''static'' },
      { from: ''index.html'', to: ''index.html'', toType: ''file''},
    ]),
  ],
};

Entonces

const HtmlWebpackPlugin = require(''html-webpack-plugin'');

module.exports = {
  // ...
  plugins: [    
    new HtmlWebpackPlugin({
      template: ''./path/to/index.html'',
    })
  ],
  // ...
};

Como puede ver, copie toda la carpeta estática junto con todo su contenido en la carpeta dist. No se necesita CSS ni archivos ni ningún otro complemento.

Si bien este método no sirve para todo, haría el trabajo de manera simple y rápida.

Answer 5

Puede agregar el índice directamente a la configuración de su entrada y usar un cargador de archivos para cargarlo

module.exports = {

  entry: [
    __dirname + "/index.html",
    .. other js files here
  ],

  module: {
    rules: [
      {
        test: //.html/, 
        loader: ''file-loader?name=[name].[ext]'', 
      },
      .. other loaders
    ]
  }

}

Answer 6

Puedes usar copy-webpack-plugin . Funciona así:

module.exports = {
  plugins: [
    new CopyWebpackPlugin([{
      from: ''./*.html''
    }])
  ]
}

Answer 7

También me pareció lo suficientemente fácil y genérico poner mi archivo index.html en el directorio dist/ y agregar <script src=''main.js''></script> a index.html para incluir mis archivos de paquete web empaquetados. main.js parece ser el nombre de salida predeterminado de nuestro paquete si no se especifica otro en el archivo conf de webpack . Supongo que no es una buena solución a largo plazo, pero espero que pueda ayudar a entender cómo funciona el paquete web .

Answer 8

Yo diría que la respuesta es: no puedes. (o al menos: no deberías). Esto no es lo que se supone que debe hacer Webpack. Webpack es un paquete y no debe usarse para otras tareas (en este caso: copiar archivos estáticos es otra tarea). Debes usar una herramienta como Grunt o Gulp para hacer tales tareas. Es muy común integrar Webpack como una tarea de Grunt o como una tarea de Gulp . Ambos tienen otras tareas útiles para copiar archivos como usted describió, por ejemplo, grunt-contrib-copy o gulp-copy .

Para otros activos (no el index.html ), puede agruparlos con Webpack (para eso es exactamente Webpack). Por ejemplo, var image = require(''assets/my_image.png''); . Pero supongo que su index.html no debe ser parte del paquete y, por lo tanto, no es un trabajo para el paquete.

Answer 9

Opción 1

En su archivo index.js (es decir, entrada de paquete web) agregue un requisito a su index.html través file-loader complemento del file-loader , por ejemplo:

require(''file-loader?name=[name].[ext]!../index.html'');

Una vez que cree su proyecto con webpack, index.html estará en la carpeta de salida.

opcion 2

Use html-webpack-plugin para evitar tener un index.html. Simplemente haga que webpack genere el archivo por usted.