web-dev-qa-db-fra.com

Webpack.config comment copier simplement le fichier index.html dans le dossier dist

J'essaie d'automatiser les actifs entrant dans/dist. J'ai le config.js suivant:

_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']
  }
}
_

Je souhaite également inclure main.html à partir du répertoire situé à côté de/lib, dans le dossier/dist lors de l'exécution de Webpack. Comment puis-je faire ceci?

MISE À JOUR 1 2017_____________

Ma manière préférée de faire ceci maintenant est d'utiliser le html-webpack-plugin avec un fichier de modèle. Merci à la réponse acceptée aussi! L'avantage de cette méthode est que le fichier d'index aura également le lien js cachbusted ajouté immédiatement!

webpack
167
SuperUberDuper

Option 1

Dans votre fichier index.js (entrée du webpack), ajoutez un besoin à votre index.html via chargeur de fichiers plugin, par exemple:

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

Une fois que vous avez créé votre projet avec webpack, index.html sera dans le dossier de sortie.

Option 2

Utilisez html-webpack-plugin pour ne pas avoir d'index.html. Faites simplement que webpack génère le fichier pour vous.

152
VitalyB

J'ajouterai une option à la réponse de VitalyB:

Option 3

Via npm. Si vous exécutez vos commandes via npm, vous pouvez ajouter cette configuration à votre package.json (consultez également le fichier webpack.config.js). Pour le développement, exécutez npm start, inutile de copier index.html dans ce cas, car le serveur Web sera exécuté à partir du répertoire de fichiers source et bundle.js sera disponible au même endroit (bundle.js ne vit que dans la mémoire mais sera disponible comme s’il se trouvait avec index.html). Pour la production, npm run build et un dossier dist contiendra votre bundle.js et index.html sera copié avec une bonne vieille commande cp, comme vous pouvez le voir ci-dessous:

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

Mise à jour: option 4

Il existe un copy-webpack-plugin , comme décrit dans ce réponse Stackoverflow

Mais généralement, à l'exception du très "premier" fichier (comme index.html) et des éléments plus importants (comme les grandes images ou les vidéos), incluez les fichiers css, html, images, etc. directement dans votre application via require et Webpack. l'inclura pour vous (enfin, après l'avoir configuré correctement avec les chargeurs et éventuellement des plugins).

58
EricC

Vous pouvez utiliser le CopyWebpackPlugin . Cela fonctionne comme ça:

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

Je dirais que la réponse est: vous ne pouvez pas. (ou du moins: vous ne devriez pas). Ce n'est pas ce que Webpack est censé faire. Webpack est un bundle et ne doit pas être utilisé pour d'autres tâches (dans ce cas, la copie de fichiers statiques est une autre tâche). Vous devriez utiliser un outil comme Grunt ou Gulp pour effectuer de telles tâches. Il est très courant d'intégrer Webpack en tant que tâche Grunt ou en tant que tâche Gulp . Ils ont tous deux d'autres tâches utiles pour la copie de fichiers, comme vous l'avez décrit, par exemple, grunt-contrib-copy ou gulp-copy .

Pour les autres actifs (pas le index.html), vous pouvez simplement les regrouper avec Webpack (c'est exactement ce à quoi Webpack est destiné). Par exemple, var image = require('assets/my_image.png');. Mais je suppose que votre index.html ne doit pas nécessairement faire partie de l’ensemble, et qu’il ne s’agit donc pas d’un travail pour l’ensemble.

15
Brodie Garnet

Vous pouvez ajouter l'index directement à votre configuration d'entrée et utiliser un chargeur de fichiers pour le charger.

module.exports = {

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

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

}
12
Jake Coxon

Cela fonctionne bien sous Windows:

  1. npm install --save-dev copyfiles
  2. Dans package.json j'ai une tâche de copie: "copy": "copyfiles -u 1 ./app/index.html ./deploy"

Cela déplace mon index.html du dossier de l'application vers le dossier de déploiement.

3
Patrick Desjardins

Pour copier un fichier index.html déjà existant dans le répertoire dist, vous pouvez simplement utiliser le HtmlWebpackPlugin en spécifiant la source index.html en tant que modèle .

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

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

Le fichier dist/index.html créé sera fondamentalement identique à votre fichier source, à la différence des ressources regroupées telles que . Les fichiers js sont injectés avec les balises <script> par webpack. Minification et d'autres options peuvent être configurés et sont documentés sur github .

1
Tobi Obeck

Pour étendre la réponse de @ hobbeshunter si vous ne voulez que index.html, vous pouvez également utiliser CopyPlugin. La principale motivation de cette méthode par rapport à l'utilisation d'autres packages est qu'il est un cauchemar d'ajouter de nombreux packages pour chaque type et de les configurer, etc. Le moyen le plus simple consiste à utiliser CopyPlugin pour tout:

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

Ensuite

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

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

Comme vous pouvez le voir, copiez tout le dossier statique avec tout son contenu dans le dossier dist. Aucun fichier css ni aucun autre plugin nécessaire.

Bien que cette méthode ne convienne pas à tout, elle permettrait de faire le travail simplement et rapidement.

1
Remy