webpackHtmlPlugin：控制注入文件的順序

我使用HtmlWebpackPlugin自動生成index.thml帶有webpack編譯的輸出。webpackHtmlPlugin：控制注入文件的順序

性能的原因，我拆我的條目廠商和項目

這樣的：

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

來源

2016-03-01 pery mimon

嘗試使用某種功能設置chunksSortMode。

chunksSortMode：允許控制chunk在被包含到html之前應該如何排序。允許的值：'none'| '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; 
    } 
}) 
//...

來源

2016-03-08 10:40:15 panlilu

爽！我多麼想念那個。 –

@panlilu的回答是不錯的，但可以簡化爲：

chunksSortMode: 'none'

來源

2016-08-24 09:38:09

這是哪裏去的？ – chovy

@chovy這在你的webpack配置文件中進行。 OP已經調用了他們的'webpack.js' –

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

來源

2017-06-07 09:27:47 Alan

webpackHtmlPlugin：控制注入文件的順序

回答

相關問題