webpackHtmlPlugin:控制注入文件的顺序

我使用 HtmlWebpackPlugin 自动生成带有 webpack 编译输出的index.thml。

出于性能原因，我将我的条目拆分为供应商和项目

诸如此类：

...
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'
        })
    ]
};

尝试使用排序函数设置 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;
    }
})
//...

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;  
}

@panlilu的答案很好，但可以简化：

chunksSortMode: 'none'

相关内容

最新更新

热门标签：