一時的なindex.htmlのためにwebpack-dev-serverから作成された静的資産を注文するにはどうすればよいですか？

私はwebpackに関するAngular 2の文書に従っています。アプリケーションをテストするためにwebpack-dev-serverを使用しようとしています。エントリポイントには、ポリフィル、ベンダー、アプリが含まれます。一時的なindex.htmlのためにwebpack-dev-serverから作成された静的資産を注文するにはどうすればよいですか？

devサーバーを実行しようとすると、ファイルはpolyfills、app、およびappとして注文されます。

index.htmlテンプレートでレンダリングされたときに明示的に注文する方法はありますか？あなたはそれをachiveするHtmlWebpackPluginからchunkSortModeオプションを使用することができます

var webpack = require('webpack'); 
 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
 
var helpers = require('./helpers'); 
 

 
module.exports = { 
 
    cache: false, 
 
    debug: true, 
 

 
    entry: { 
 
     'polyfills': './src/polyfills.ts', 
 
     'vendor': './src/vendor.ts', 
 
     'vip-app': './src/main.ts' 
 
    }, 
 

 
    resolve: { 
 
     extensions: ['', '.js', '.ts'], 
 
    }, 
 

 
    module: { 
 
     loaders: [ 
 
      { 
 
       test: /\.ts$/, 
 
       loaders: ['ts', 'angular2-template-loader'] 
 
      }, 
 
      { 
 
       test: /\.html$/, 
 
       loader: 'html' 
 
      }, 
 
      { 
 
       test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
 
       loader: 'file?name=assets/[name].[hash].[ext]' 
 
      }, 
 
      { 
 
       test: /\.css$/, 
 
       loaders: [ExtractTextPlugin.extract('style', 'css-loader'), 'to-string', 'css'] 
 
      } 
 
     ] 
 
    }, 
 

 
    plugins: [ 
 
     new webpack.optimize.CommonsChunkPlugin({ 
 
      name: ['vendor', 'polyfills'] 
 
     }), 
 

 
     new HtmlWebpackPlugin({ 
 
      template: 'index.html' 
 
     }) 
 
    ] 
 
};

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <base href="/"> 
 
    <title>Angular With Webpack</title> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link href="http://localhost:8080/vip-app.css" rel="stylesheet"></head> 
 
<body> 
 
    <vip-app-base-local-dev>Loading...</vip-app-base-local-dev> 
 
    <script type="text/javascript" src="http://localhost:8080/polyfills.js"></script> 
 
    <script type="text/javascript" src="http://localhost:8080/vip-app.js"></script> 
 
    <script type="text/javascript" src="http://localhost:8080/vendor.js"></script></body> 
 
</html>

出典

2016-09-12 redcloud1800

。

https://github.com/ampedandwired/html-webpack-plugin#configuration

chunksSortMode：彼らがHTMLに含まれている前にチャンクがソートされなければならない方法を制御することができます。許可される値： 'none' | | '依存関係' | {機能} - デフォルト： '自動' 例

1）アルファベット順

2）オプション
であなたのチャンクをソートします。このオプション
chunksSortMode: 'none' 
については

chunksSortMode: 'dependency'

は、tに基づいてチャンクをソートします。相続人はお互いに依存します。

3）また、あなたは次のようにカスタム関数を記述することができます。

function sortChunk(packages) { 
    return function sort(a, b) { 
    if (packages.indexOf(a.names[0]) > packages.indexOf(b.names[0])) { 
     return 1; 
     } 
     if (packages.indexOf(a.names[0]) < packages.indexOf(b.names[0])) { 
     return -1; 
     } 
     return 0; 
    } 
}

そして

vip-app' => 'vendor' ==> 'polyfills'

出典

2016-09-13 04:25:46 yurzui

目的の順序を達成するために

new HtmlWebpackPlugin({ template: 'index.html', chunksSortMode: sortChunk(['vip-app', 'vendor', 'polyfills' ]) })

のようにそれを使用するので、ありがとうございました!!!! ！ – redcloud1800

一時的なindex.htmlのためにwebpack-dev-serverから作成された静的資産を注文するにはどうすればよいですか？

答えて

関連する問題