Menu
I use HtmlWebpackPlugin for auto generate the index.thml with the output of webpack compile.
for performance reason I split my entries to vendors and project
like that:
...
entry:{
vendors:'./vendors.js'
,TimerApp:'./src/index.js'
},
output:{
path: path.join(__dirname,'build'),
filename:'[name].js'
},
...
when I run the project by webpack-dev-server:
set NODE_ENV=development && webpack-dev-server -d --hot --port 4040 --content-base src/"
I get index.html
<head>
...
<title>Timer Task</title>
<link href="vendors.css" rel="stylesheet">
<link href="TimerApp.css" rel="stylesheet">
</head>
<body >
...
<script src="vendors.js"></script>
<script src="TimerApp.js"></script>
verdor.js first and TimerApp.js second. and that perfect.
but.. when I use webpack:
webpack --colors --watch --optimize-dedupe
the order is TimerApp.js first and vendors.js second
and that make exception every time project compiled
very annoyed.
so, what is the way to control the order of the output files ??
reference: webpack.js file:
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var ngAnnotatePlugin = require('ng-annotate-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var exportRunTimeVariable = new webpack.DefinePlugin({
MODE: {
production: process.env.NODE_ENV === 'production'
}
});
var extractSCSS = new ExtractTextPlugin("[name].css");
module.exports = {
watch: true,
devtool: 'source-map', /*devtool: 'inline-source-map'*/
context: __dirname, /*for node key*/
node:{
__filename:true,
__dirname:true
},
resolve: {
root:[
path.resolve('src')
,path.resolve('node_modules')
,path.resolve('bower_components')
]
//root: __dirname + '/src'
},
entry:{
vendors:'./vendors.js'
,TimerApp:'./src/index.js'
},
output:{
path: path.join(__dirname,'build'),
filename:'[name].js'
},
module:{
loaders:[
/*
test: A condition that must be met
exclude: A condition that must not be met
include: A condition that must be met
loader: A string of "!" separated loaders
loaders: A array of loaders as string
*/
{test:/\.css$/,
loader:extractSCSS.extract('style-loader?sourceMap','css- loader!sass-loader')},
{test: /\.scss$/,
loader: extractSCSS.extract('style-loader?sourceMap','css-loader!sass-loader')},
{test: /\.js$/,
loader: 'ng-annotate',
exclude: /node_modules|bower_components/},
{test: /\.(woff|woff2|ttf|eot|svg)(\?]?.*)?$/,
loader : 'file-loader?name=res/[name].[ext]?[hash]'
},
//{test: /index\.html$/,
// loader : 'file-loader?name=[name].[ext]'
//},
{test: /\.html$/,
loader: 'raw'
,exclude:[/index.html/]},
{test: /\.json/,
loader: 'json'}
]
},
plugins: [
extractSCSS,
exportRunTimeVariable,
new ngAnnotatePlugin({
add: true
// other ng-annotate options here
}),
new HtmlWebpackPlugin({
title: 'Timer Task'
//,filename: ''
,template: 'src/index.html'
})
]
};
880
Try to set chunksSortMode with a sort function.
chunksSortMode: Allows to control how chunks should be sorted before they are included to the html. Allowed values: 'none' | 'auto' | 'dependency' | {function} - default: 'auto'
https://github.com/ampedandwired/html-webpack-plugin
//...
new HtmlWebpackPlugin({
title: 'Timer Task',
template: 'src/index.html',
chunksSortMode: function (a, b) { //alphabetical order
if (a.names[0] > b.names[0]) {
return 1;
}
if (a.names[0] < b.names[0]) {
return -1;
}
return 0;
}
})
//...
@panlilu 's answer is good, but could be simplified:
chunksSortMode: 'none'
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
