webpackHtmlPlugin:控制注入文件的顺序
我用HtmlWebpackPlugin自动生成index.thml，输出webpack编译。
出于性能原因，我将条目拆分为供应商和项目。
就像这样：
...
entry:{
vendors:'./vendors.js'
,TimerApp:'./src/index.js'
},
output:{
path: path.join(__dirname,'build'),
filename:'[name].js'
},
...当我用webpack-dev-server运行这个项目时
set NODE_ENV=development && webpack-dev-server -d --hot --port 4040 --content-base src/"
我得到了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第一，TimerApp.js第二。还有那个完美的。
但是..。当我用webpack时：
webpack --colors --watch --optimize-dedupe
顺序是TimerApp.js，其次是vendors.js，每次编译项目时都会出现异常。
非常恼怒。
那么，如何控制输出文件的顺序呢？？？
参考：webpack.js文件：
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'
})
]
};回答 3
Stack Overflow用户
发布于 2016-03-08 10:40:15
尝试使用排序函数设置chunksSortMode。
chunksSortMode:允许控制块在被包含到html之前应该如何排序。允许值：“无”、“自动”、“自动”、“依赖”、“{function}”-默认值：“自动”
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;
}
})
//...Stack Overflow用户
发布于 2017-06-07 09:27:47
chunksSortMode: function (chunk1, chunk2) {
var order = ['first', 'second', 'third'];
var order1 = order.indexOf(chunk1.names[0]);
var order2 = order.indexOf(chunk2.names[0]);
return order1 - order2;
}Stack Overflow用户
发布于 2016-08-24 09:38:09
@panlilu的答案很好，但可以简化如下：
chunksSortMode: 'none'https://stackoverflow.com/questions/35725384
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号