2016-04-06 3 views
2

Was ich versuche, ist Webpack auf eine Weise zu konfigurieren, die alle Teil HTML-Vorlagen, die in eckigen 1.x-Direktiven usw. benötigt werden, in eine separater Ordner (genau wie der Datei-Loader für Assets, auf die von css verwiesen wird). Ich möchte nicht, dass die Teilhtmls in mein JavaScript-Paket aufgenommen werden, sondern alle in einem Ordner mit Hash-Namen.Webpack angularjs Kopie angularjs Vorlagen, aber nicht in Javascript-Bundle

Ich habe versucht, die Datei-Loader zu tun, aber wenn ich Webpack im Watch-Modus laufen, kopiert es auch die html im Dist-Ordner wieder an sie einen neuen Hash anhängen und im Wesentlichen eine Endlosschleife als jeder neue HTML-das macht taucht in diesem Ordner auf, wird also ein neuer html angezeigt und immer wieder neu. Ich habe versucht, ein exclude passendes Muster für diesen Loader zu setzen, aber Webpack lief immer noch ständig über diesen Ordner. Hier

ist der Auszug meiner webpack.config.js Datei:

module: { 
    loaders: [ 
     test: /\.html$/, 
     exclude: /bundle\/templates/, 
     loader: `file-loader?name=bundle/templates/[name]-[hash].[ext] 
    ] 
} 

gibt es einen Loader, der mir helfen würde, tun, was ich will, ohne Hacks zurückgreifen?

Antwort

1

Ok Ich habe die Antwort gefunden. Das Problem war nicht die file-loader, die auch ohne die exclude korrekt konfiguriert ist. Was die Endlosschleife verursacht hat, war eine dynamische Anforderung, die eine Regex erstellt hat, die auch mit diesen kopierten Assets übereinstimmte. Daher wurde das Problem gelöst, indem ein geeigneter Kontext für diese dynamische Anforderung festgelegt wurde.

+0

refered werden Sind Sie in der Lage Ihre Lösung zu teilen ? Es könnte für andere in der Zukunft nützlich sein :) –

1
In the webpack.config file you can use the same way like this in the loader section. 

    { 
     test: /\.html$/, 
     exclude: path.resolve(__dirname, 'index.html'), 
     loader: 'file-loader', 
     options: { 
      name: '[name].[ext]', 
      outputPath: 'views/' 
     } 
    }, 

Und im Plugins Abschnitt der webpack.config Datei

plugins: [ 
    new HtmlWebpackPlugin({ 
     template: 'index.html', 
     inject: true 
    }), 
    new ExtractTextPlugin('bundle.css') 
] 

Diese alle htmls kopiert und aus der index.html

Verwandte Themen