2016-03-01 9 views
8

Io uso HtmlWebpackPlugin per generare automaticamente il index.thml con l'output di compilazione webpack.webpackHtmlPlugin: controlla l'ordine dei file iniettati

per ragioni di prestazioni ho diviso mie iscrizioni al fornitori e progetto

del genere:

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

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

quando si esegue il progetto di webpack-dev-server:

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

Ottengo 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 prima e TimerApp.js secondo. e quello perfetto.

ma .. quando uso webpack:

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

l'ordine è TimerApp.js prima e la seconda vendors.js e tale eccezione rendono ogni progetto volta compilato

molto seccato.

quindi, qual è il modo per controllare l'ordine dei file di output ??

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

risposta

16

tenta di impostare chunksSortMode con una funzione di ordinamento.

chunksSortMode: consente di controllare il modo in cui i blocchi devono essere ordinati prima che vengano inclusi nell'html. Valori ammessi: "nessuno" | 'auto' | 'dipendenza' | {Function} - default: '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; 
    } 
}) 
//... 
+0

cool! come mi manca. –

0

risposta s' @panlilu è buona, ma potrebbe essere semplificata:

chunksSortMode: 'none' 
+0

dove va? – chovy

+0

@chovy va nel file di configurazione del pacchetto web. L'OP ha chiamato il loro 'webpack.js' –

5
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; 
} 
Problemi correlati