Question

我使用HtmlWebpackPlugin自动生成带有webpack compile输出的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'
        })
    ]
};

Answer 1

尝试使用sort函数设置chunksSortMode。

chunksSortMode：允许控制块在被包含到html之前应该如何排序。允许值：＆＃39;无＆＃39; | ＆＃39;自动＆＃39; | ＆＃39;依赖性＆＃39; | {function} - 默认：＆＃39;自动＆＃39;

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

Answer 2

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

Answer 3

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

chunksSortMode: 'none'

webpackHtmlPlugin：控制注入文件的顺序

3 个答案: