How do I order static assets created from webpack-dev-server for temporary index.html? -
i have been following angular 2 documentation regarding webpack. attempting use webpack-dev-server test application. entry points include polyfills, vendor, , app.
when attempt run dev server, files ordered polyfills, app, , app.
is there way explicitly order them when rendered in index.html template?
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 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>
you can use chunksortmode option htmlwebpackplugin achive it.
chunkssortmode: allows control how chunks should sorted before included html. allowed values: 'none' | 'auto' | 'dependency' | {function} - default: 'auto'
for example
1) option
chunkssortmode: 'none' will sort chunks in alphabetical order
2) option
chunkssortmode: 'dependency' will sort chunks based on dependencies each other.
3) can write custom function like:
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; } } and use like
new htmlwebpackplugin({ template: 'index.html', chunkssortmode: sortchunk(['vip-app', 'vendor', 'polyfills' ]) }) to achieve desired order
vip-app' => 'vendor' ==> 'polyfills' 
Comments
Post a Comment