Ich versuche, Assets zu automatisieren, die in / dist gehen. Ich habe die folgende 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']
  }
}

Ich möchte auch main.html aus dem Verzeichnis neben / lib in den Ordner / dist aufnehmen, wenn Webpack ausgeführt wird. Wie kann ich das machen?

UPDATE 1 2017_____________

Meine Lieblingsmethode, dies jetzt zu tun, ist die Verwendung der html-webpack-pluginmit einer Vorlagendatei. Danke auch an die akzeptierte Antwort! Der Vorteil dieser Methode ist, dass in der Indexdatei auch der cachbusted js-Link sofort hinzugefügt wird!

Option 1

index.jsFügen Sie in Ihrer Datei (dh Webpack-Eintrag) eine Anforderung zu Ihrem index.htmlVia -Loader- Plugin hinzu, z.

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

Sobald Sie Ihr Projekt mit Webpack erstellt haben, befindet index.htmles sich im Ausgabeordner.

Option 2

Verwenden Sie das HTML-Webpack-Plugin , um zu vermeiden, dass überhaupt eine index.html vorhanden ist. Lassen Sie Webpack einfach die Datei für Sie generieren.

Ich werde der Antwort von VitalyB eine Option hinzufügen:

Option 3

Über npm. Wenn Sie Ihre Befehle über npm ausführen, können Sie dieses Setup zu package.json hinzufügen (siehe dort auch die Datei webpack.config.js). Für die Entwicklung von run npm startist es in diesem Fall nicht erforderlich, index.html zu kopieren, da der Webserver aus dem Quelldateiverzeichnis ausgeführt wird und die Datei bundle.js an derselben Stelle verfügbar ist (die Datei bundle.js befindet sich jedoch nur im Speicher wird verfügbar sein, als ob es zusammen mit index.html gefunden würde). Für den Produktionslauf npm run buildund ein dist-Ordner enthält Ihre bundle.js und index.html wird mit einem guten alten cp-Befehl kopiert, wie Sie unten sehen können:

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

Update: Option 4

Es gibt ein Copy-Webpack-Plugin , wie in dieser Stackoverflow-Antwort beschrieben

Aber im Allgemeinen, mit Ausnahme der allerersten Datei (wie index.html) und größerer Assets (wie große Bilder oder Videos), enthalten Sie CSS, HTML, Bilder usw. direkt in Ihrer App über requireund Webpack wird es für Sie einschließen (Nun, nachdem Sie es mit Loadern und möglicherweise Plugins richtig eingerichtet haben).

Sie können das CopyWebpackPlugin verwenden . Es funktioniert einfach so:

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

Ich würde sagen, die Antwort lautet: Sie können nicht. (oder zumindest: du solltest nicht). Dies ist nicht das, was Webpack tun soll. Webpack ist ein Bundler und sollte nicht für andere Aufgaben verwendet werden (in diesem Fall: Das Kopieren statischer Dateien ist eine weitere Aufgabe). Sie sollten ein Werkzeug wie Grunt oder Gulp verwenden, um solche Aufgaben zu erledigen. Es ist sehr üblich, Webpack als Grunt-Aufgabe oder als Gulp-Aufgabe zu integrieren . Beide haben andere Aufgaben, die zum Kopieren von Dateien nützlich sind, wie Sie sie beschrieben haben, z. B. Grunt-Contrib-Copy oder Gulp-Copy .

Für andere Assets (nicht die index.html) können Sie sie einfach mit Webpack bündeln (genau dafür ist Webpack gedacht). Zum Beispiel var image = require('assets/my_image.png');. Aber ich gehe davon aus, dass Ihre index.htmlBedürfnisse nicht Teil des Bundles sein müssen, und daher ist es kein Job für den Bundler.

Sie können den Index direkt zu Ihrer Eintragskonfiguration hinzufügen und ihn mit einem Dateilader laden

module.exports = {

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

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

}

Um eine bereits vorhandene index.htmlDatei in das distVerzeichnis zu kopieren , können Sie einfach das HtmlWebpackPlugin verwenden, indem Sie die Quelle index.htmlals Vorlage angeben .

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

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

Die erstellte dist/index.htmlDatei ist im Grunde dieselbe wie Ihre Quelldatei, mit dem Unterschied, dass gebündelte Ressourcen wie .js-Dateien<script> vom Webpack mit Tags versehen werden. Minimierung und weitere Optionen können konfiguriert und auf github dokumentiert werden .

Dies funktioniert gut unter Windows:

1. npm install --save-dev copyfiles
2. In package.jsonIch habe eine Kopieraufgabe:"copy": "copyfiles -u 1 ./app/index.html ./deploy"

Dadurch wird meine index.html aus dem App-Ordner in den Bereitstellungsordner verschoben.

Um die Antwort von @ hobbeshunter zu erweitern, wenn Sie nur index.html verwenden möchten, können Sie auch CopyPlugin verwenden. Die Hauptmotivation, diese Methode gegenüber anderen Paketen zu verwenden, besteht darin, dass es ein Albtraum ist, viele Pakete für jeden einzelnen Typ hinzuzufügen und zu konfigurieren usw. Die Am einfachsten ist es, CopyPlugin für alles zu verwenden:

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

Dann

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

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

Wie Sie sehen können, kopieren Sie den gesamten statischen Ordner zusammen mit dem gesamten Inhalt in den dist-Ordner. Keine CSS oder Datei oder andere Plugins erforderlich.

Obwohl diese Methode nicht für alles geeignet ist, würde sie die Arbeit einfach und schnell erledigen.

Ich fand es auch einfach und allgemein genug setzen meine index.html Datei in dist/ Verzeichnis und fügen Sie <script src='main.js'></script>zu index.htmlmeinen gebündelt webpack Dateien enthält. main.jsscheint der Standardausgabename unseres Bundles zu sein, wenn in der conf-Datei des Webpacks kein anderer angegeben ist . Ich denke, es ist keine gute und langfristige Lösung, aber ich hoffe, es kann helfen zu verstehen, wie Webpack funktioniert.