如何將webpack設置爲不每次重新編譯角度？

最近，我開始致力於簡單的HTML5帆布遊戲+ angular2的路由，顯示高分等。由於我沒有觸及angular2核心，我想不重新編譯所有內容並將所有內容捆綁成一個大文件。更多我更喜歡有angular2核心+ http +路由器，我的應用程序在單獨的文件中。如何將webpack設置爲不每次重新編譯角度？

現在我得到幾乎5MB的捆綁包，甚至更大的.map它暫停我的電腦在瀏覽器中加載（鼠標卡住，音樂停止播放片刻，如半秒）很短的時間，這是非常煩人的我想，這是因爲捆綁大小）。我可以使用多個入口點來完成這項工作嗎？

這裏是我的WebPack配置：

module.exports = { 
    devtool: 'source-map', 
    entry: './src/app/bootstrap', 
    output: { 
    path: __dirname + '/dist', publicPath: 'dist/', filename: 'bundle.js' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.ts'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/ 
     } 
    ] 
    } 
};

我使用的角度2.0.0 beta.0和1.12.2的WebPack

來源

2016-01-01 Eggy

更新：考慮cache option。

您的問題的答案是：是的。您可以使用多個入口點。

這是我正在使用的一個示例。

var path = require('path'); 

var webpack = require('webpack'); 
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; 
var ProvidePlugin = webpack.ProvidePlugin; 
//var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin; 

module.exports = { 
    devtool: 'source-map', 
    debug: true, // set false in production 
    cache: true, 

    entry: { 
     'vendor': './src/vendor.ts', // third party dependencies 
     'app': './src/app/app.ts' // our app 
    }, 

    output: { 
     path: root('dist'), 
     filename: '[name].js', 
     sourceMapFilename: '[name].map', 
     chunkFilename: '[id].chunk.js', 
     pathinfo: true 
    }, 

    resolve: { 
     extensions: ['', '.ts', '.js', '.json', '.css', '.html'] 
    }, 

    module: { 
     loaders: [ 
      { 
       test: /\.ts$/, 
       loader: 'ts-loader', 
       query: { 
        'ignoreDiagnostics': [ 
         2403, // 2403 -> Subsequent variable declarations 
         2300, // 2300 -> Duplicate identifier 
         2374, // 2374 -> Duplicate number index signature 
         2375 // 2375 -> Duplicate string index signature 
        ] 
       }, 
       exclude: [/\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/] 
      }, 

      // Support for *.json files. 
      {test: /\.json$/, loader: 'json-loader'}, 

      // support for .css 
      {test: /\.css$/, loaders: ['style', 'css']}, 
     ], 
     noParse: [/angular2-polyfills/] 
    }, 

    plugins: [ 
     new CommonsChunkPlugin({name: 'vendor', filename: 'vendor.js', minChunks: Infinity}), 
     new CommonsChunkPlugin({name: 'common', filename: 'common.js', minChunks: 2, chunks: ['app', 'vendor']}), 
     new ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery", 
      Cookies: "js-cookie" 
     }) 
//  new UglifyJsPlugin() // use for production 
    ], 

    // Other module loader config 
    tslint: { 
     emitErrors: true, 
     failOnHint: false 
    }, 
    // our Webpack Development Server config 
    devServer: { 
     contentBase: 'src', 
     publicPath: '/__build__', 
     colors: true, 
     progress: true, 
     port: 3000, 
     displayCached: true, 
     displayErrorDetails: true, 
     inline: true 
    } 
}; 

// Helper functions 
function root(args) { 
    args = Array.prototype.slice.call(arguments, 0); 
    return path.join.apply(path, [__dirname].concat(args)); 
} 

function rootNode(args) { 
    args = Array.prototype.slice.call(arguments, 0); 
    return root.apply(path, ['node_modules'].concat(args)); 
}

該配置比你的配置稍微複雜一些。它來自使用Webpack的Angular 2/Bootstrap 4/OAuth2 Github project。

這會將Angular的東西（和RxJS以及其他任何東西）放入「供應商」捆綁包中，但是您必須製作一個文件來調用所需的東西。

vendor.ts：

require('./css/bootstrap.css'); 
require('./css/main.css'); 

import 'angular2/bundles/angular2-polyfills'; 

import 'angular2/platform/browser'; 
import 'angular2/core'; 
import 'angular2/http'; 
import 'angular2/router';

然後下面的代碼添加到您的index.html文件的底部。

<script src="dist/common.js"></script> 
<script src="dist/vendor.js"></script> 
<script src="dist/app.js"></script>

您可能需要調整一些路徑才能正常連接，具體取決於index.html文件與其他文件夾相關的位置。

但是，我認爲，會爲你做。檢查Github項目，看看它是否在行動中。

來源

2016-01-01 15:20:06

好吧，我做到了。但是這並沒有解決我的性能問題。當我刷新我的應用程序時，CPU使用率達到100％。如果我可以使用預編譯的angular2 bundle（我之前使用過它們，並且它們工作得很好），那將是非常好的。 – Eggy

@Eggy你檢查過'cache'配置選項嗎？由於我不知道哪部分實際上會讓您的機器變慢，所以診斷有點困難。但是這也可能有所幫助：https：//webpack.github.io/docs/configuration.html#cache –

對於一個簡短的快速修復：當我嘗試使用Angular 2 5 min quickstart guide的webpack時，我只做了以下操作：我將供應商腳本文件包含在html中，「直接」，幾乎就像教程一樣，除了我沒有需要system.js了的WebPack設置，所以我不包括，但我確實需要「bundle.js」，它的WebPack生產：

<body> 

<my-app></my-app> 

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
<script src="node_modules/rxjs/bundles/Rx.js"></script> 
<script src="node_modules/angular2/bundles/angular2.dev.js"></script> 
<script src="bundle.js"></script> 

</body>

而與此的WebPack配置，使我自己的一個包模塊只：

var webpack = require("webpack"); 

module.exports = { 
    entry: './src/boot.ts', 
    output: { 
    filename: 'bundle.js' 
    }, 
    devtool: 'source-map', 
    resolve: { 
    extensions: ['', '.ts', '.js'] 
    }, 
    module: { 
    loaders: [ 
     { test: /\.ts$/, loader: 'ts-loader' } 
    ] 
    }, 
    plugins: [ 
    new webpack.IgnorePlugin(/angular2/) 
    ] 
};

來源

2016-01-21 01:38:02 EricC

如何將webpack設置爲不每次重新編譯角度？

回答

相關問題