Sto cercando di automatizzare le risorse andando in / dist. Ho il seguente 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']
  }
}

Voglio anche includere main.html dalla directory che si trova accanto a / lib, nella cartella / dist durante l'esecuzione del webpack. Come posso fare questo?

AGGIORNAMENTO 1 2017_____________

Il mio modo preferito per farlo ora è usare il html-webpack-pluginfile template. Grazie anche alla risposta accettata! Il vantaggio di questo modo è che il file indice avrà anche il collegamento js memorizzato nella cache aggiunto fuori dalla scatola!

opzione 1

Nel vostro index.jsfile di (vale a dire la voce webpack) aggiungere un richiedono per il vostro index.htmltramite file di caricatore plug-in, ad esempio:

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

Una volta creato il tuo progetto con webpack, index.htmlsarà nella cartella di output.

opzione 2

Usa html-webpack-plugin per evitare di avere un index.html. Chiedi semplicemente a webpack di generare il file per te.

Aggiungerò un'opzione alla risposta di VitalyB:

Opzione 3

Via npm. Se esegui i tuoi comandi tramite npm, puoi aggiungere questa configurazione a package.json (dai un'occhiata anche a webpack.config.js). Per lo sviluppo run npm start, non è necessario copiare index.html in questo caso perché il server Web verrà eseguito dalla directory dei file di origine e bundle.js sarà disponibile dallo stesso posto (bundle.js vivrà solo in memoria ma sarà disponibile come se si trovasse insieme a index.html). Per l'esecuzione di produzione npm run builde una cartella dist conterrà bundle.js e index.html verrà copiato con un buon vecchio comando cp, come puoi vedere di seguito:

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

Aggiornamento: opzione 4

Esiste un plug-in copy-webpack , come descritto in questa risposta StackOverflow

Ma in generale, ad eccezione del file "primo" (come index.html) e delle risorse più grandi (come immagini o video di grandi dimensioni), includono css, html, immagini e così via direttamente nella tua app via requiree il webpack lo includerà per te (bene, dopo averlo impostato correttamente con caricatori ed eventualmente plugin).

È possibile utilizzare CopyWebpackPlugin . Funziona così:

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

Direi che la risposta è: non puoi. (o almeno: non dovresti). Questo non è ciò che dovrebbe fare Webpack. Webpack è un bundler e non deve essere utilizzato per altre attività (in questo caso: copiare file statici è un'altra attività). Dovresti usare uno strumento come Grunt o Gulp per fare tali compiti. È molto comune integrare Webpack come attività Grunt o come attività Gulp . Entrambi hanno altre attività utili per la copia di file come hai descritto, ad esempio grunt-contrib-copy o gulp-copy .

Per altre risorse (non le index.html), puoi semplicemente raggrupparle con Webpack (questo è esattamente ciò che serve a Webpack). Ad esempio var image = require('assets/my_image.png');,. Ma presumo che le tue index.htmlesigenze non facciano parte del bundle, e quindi non è un lavoro per il bundler.

È possibile aggiungere l'indice direttamente alla configurazione della voce e utilizzare un caricatore di file per caricarlo

module.exports = {

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

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

}

Per copiare un index.htmlfile già esistente nella distdirectory puoi semplicemente usare HtmlWebpackPlugin specificando l'origine index.htmlcome modello .

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

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

Il dist/index.htmlfile creato sarà sostanzialmente lo stesso del file sorgente con la differenza che le risorse raggruppate come i file .js vengono iniettate con <script>tag dal webpack. La minimizzazione e ulteriori opzioni possono essere configurate e documentate su github .

Funziona bene su Windows:

1. npm install --save-dev copyfiles
2. In package.jsonHo un compito di copia:"copy": "copyfiles -u 1 ./app/index.html ./deploy"

Questo sposta il mio index.html dalla cartella dell'app nella cartella deploy.

Per estendere la risposta di @ hobbeshunter se vuoi prendere solo index.html puoi anche usare CopyPlugin, La motivazione principale per usare questo metodo rispetto all'uso di altri pacchetti è perché è un incubo aggiungere molti pacchetti per ogni singolo tipo e configurarlo ecc. il modo più semplice è usare CopyPlugin per tutto:

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

Poi

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

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

Come puoi vedere, copia l'intera cartella statica insieme a tutto il suo contenuto nella cartella dist. Nessun CSS o file o altri plug-in necessari.

Mentre questo metodo non è adatto a tutto, farebbe il lavoro in modo semplice e veloce.

Ho anche trovato facile e abbastanza generico per mettere la mia index.html lima nella dist/ directory e aggiungere <script src='main.js'></script>a index.htmlincludere i miei file webpack bundle. main.jssembra essere il nome di output predefinito del nostro pacchetto se non specificato diversamente nel file conf del webpack . Immagino che non sia una soluzione valida ea lungo termine, ma spero che possa aiutare a capire come funziona il webpack .