2016-12-31 16 views
1

webpackを使用して、私のangular2アプリケーションをProductionに移動したいと思っています。角2 webpack Systemjs.config.jsスクリプトとCSSの問題

<!DOCTYPE html> 
<html> 
<head> 
    <title>iPage Quick Order</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" type="text/css" href="mystyle.css"> 
    <link rel="stylesheet" type="text/css" href="Stylesheet.css"> 
    <script src="node_modules/core-js/client/shim.min.js"></script> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="src/script/systemjs.config.js"></script> 
    <script src="node_modules/ng2-bs4-modal/bundles/ng2-bs4-modal.js"></script> 
    <script src="node_modules/jquery/dist/jquery.min.js"></script> 
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> 
    <script> 
     System.import('src/source/app/bootstrap/main').catch(function(err){ console.error(err); }); 
    </script> 
</head> 
<body> 
    <my-app>Loading...</my-app> 
</body> 
</html> 

私の質問は、PRODモードでは、私はエラーを取得しておりますので、ウェブパック にCSSやJSファイルを追加する方法を、そのCSSやJSファイルが見つかりませんということです。

答えて

1

あなたは、たとえば以下のを見て、 "HtmlWebpackPlugin" を使用することができます。

のWebPACKは、JSとCSSファイルの数を生成します:https://angular.io/docs/ts/latest/guide/webpack.html#!#loadersウェブサイトから

//First import this package 

    import HtmlWebpackPlugin from 'html-webpack-plugin'; 

    //Then add this plugin 

    plugins: [ 
     // Create HTML file that includes reference to bundled JS. 
     new HtmlWebpackPlugin({ 
      template: 'src/index.html', 
      inject: true, 
     }) 
     ] 

。私たちは手動でindex.htmlに挿入することができます。それは退屈でエラーを起こしやすいでしょう。 WebpackはHtmlWebpackPluginを使ってそれらのスクリプトとリンクを挿入することができます。