webpackHtmlPlugin: kontroluj kolejność wstrzykiwanych plików

Używam HtmlWebpackPlugin do automatycznego generowania index.thml z wynikiem kompilacji pakietu Webpack.webpackHtmlPlugin: kontroluj kolejność wstrzykiwanych plików

dla rozumu wydajności podzielić moje wpisy do sprzedawców i projektowych

tak:

... 
entry:{ 
    vendors:'./vendors.js' 
    ,TimerApp:'./src/index.js' 

}, 
output:{ 
    path: path.join(__dirname,'build'), 
    filename:'[name].js' 
}, 
...

po uruchomieniu projektu przez webpack-dev-server:

set NODE_ENV=development && webpack-dev-server -d --hot --port 4040 --content-base src/"

Otrzymuję 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 przede TimerApp.js sekund. i to doskonałe.

ale .. gdy używam WebPACK:

webpack --colors --watch --optimize-dedupe

kolejność jest TimerApp.js pierwszy i drugi vendors.js make wyjątek i że każdy projekt razem skompilowane

bardzo zły.

więc, w jaki sposób kontrolować kolejność plików wyjściowych?

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

Źródło

2016-03-01 pery mimon

spróbuj ustawić chunksSortMode z funkcją sortowania.

chunksSortMode: Pozwala kontrolować sposób sortowania porcji przed ich dołączeniem do html. Dozwolone wartości: "none" | "auto" | "zależność" | Funkcja {} - domyślnie: '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; 
    } 
}) 
//...

Źródło

2016-03-08 10:40:15 panlilu

cool! jak to przegapię. –

odpowiedź @panlilu „s jest dobry, ale mógłby być uproszczone:

chunksSortMode: 'none'

Źródło

2016-08-24 09:38:09

gdzie to się dzieje? – chovy

@chovy to idzie do twojego pliku konfiguracyjnego Webpack. OP nazwał ich '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; 
}

Źródło

2017-06-07 09:27:47 Alan

webpackHtmlPlugin: kontroluj kolejność wstrzykiwanych plików

Odpowiedz

Powiązane problemy