2016-01-05 62 views
0

我有一個app.bundle.js(基本上是主應用程序包)和兩個cordova包:iosCordova.bundle.js和androidCordova.bundle.js。我只根據用戶是否在ios或Android上登錄src其中的一個腳本。我在生成的文件夾(名爲_dist)中包含了所有包,css,png和除index.html之外的所有內容。我不能在這個文件夾中使用htmlWebpackPlugin的index.html,否則會有一個自動腳本src到cordova bundle(這是我想避免的)。我的問題是構建項目:當我運行構建它正在尋找index.html在_dist 404結果。FYI當我運行「npm run dev」但它知道它應該在主文件夾中查找index.html app.bundle.css和app.css應該在_dist中。如何有條件地在webpack中使用一個包

我webpack.config:

config.entry = { 
     app: './app.js', 
     iosCordova: ['./static/wrapper/js/ios/cordova_all.min.js'], 
     androidCordova: ['./static/wrapper/js/android/cordova_all.min.js'] 
    }; 

    config.output = { 
     path: __dirname + '/_dist', 

     publicPath: 'localhost:8080/', 

     filename: '[name].bundle.js', 

     chunkFilename: '[name].bundle.js' 
    }; 

    config.module = { 
     noParse: /node_modules\/html2canvas/, 
     preLoaders: [], 
     loaders: [ 
      { 

       test: /\.js$/,    
       loader: 'babel?optional[]=runtime', 
       presets: ['es2015'], 
       exclude: [ 
        /node_modules/, 
        /cordova_all/ 
       ] 
      }, 
      { 
       test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, 
       loader: 'file?name=[name].[ext]' 
      }, { 
       test: /\.html$/, 
       loader: "ngtemplate?relativeTo=" + __dirname + "!raw" 
      }] 
    }; 
    var cssLoader = { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss', 'scss', 'sass') 
    }; 

    config.module.loaders.push(cssLoader); 
    config.devServer = { 
     stats: { 
      modules: false, 
      cached: false, 
      colors: true, 
      chunk: false 
     } 
    }; 

    //config.resolve = { 
    // alias: { 
    //  moment: "node_modules/moment/min/moment.min.js" 
    //  //"jquery-ui": "vendor/plugins/jquery-ui.min.js" 
    // } 
    //}; 

    return config; 
}; 

的index.html:

<!DOCTYPE html> 

... 

<html> 
<head> 
    <script type="text/javascript"> 
     (function(){ 

      if (window.location.search.indexOf('cordova=') > -1) { 
       var platform = /i(phone|pod|pad)/gi.test(navigator.appVersion) ? 'iosCordova.bundle.js' : 'androidCordova.bundle.js'; 

       var cordovaScript = document.createElement('script'); 
       cordovaScript.setAttribute('src',platform); 
       document.head.appendChild(cordovaScript); 
      } 
     }()); 
    </script> 

    <link href="app.css" rel="stylesheet"> 
</head> 

... 

<script src="app.bundle.js"></script> 
</body> 
</html> 

回答

1

所以答案是:

config.plugins.push(
    new HtmlWebpackPlugin({ 
     template: './index.html', 
     inject: true, 
     excludeChunks: ['app','iosCordova','androidCordova'] 
    }) 
); 
相關問題