Brocken ist nicht in index.html eingefügt in mit webpack reagieren

Ich habe die folgende Konfigurationsdatei:Brocken ist nicht in index.html eingefügt in mit webpack reagieren

var webpack = require("webpack"); 
var path = require("path"); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

var DIST_DIR = path.resolve(__dirname,""); 
var SRC_DIR_APP = path.resolve(__dirname,"src/app"); 
var SRC_DIR = path.resolve(__dirname,"src"); 

var config = { 
    entry: 
    { 
    app: SRC_DIR_APP, 
    vendor: ['react'], 
    }, 

    output: { 
    path: DIST_DIR, 
    filename: "[name].bundle.js", 
    }, 

    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: "vendor", 
     minChunks: 1, 
     filename: '[name].bundle.js', 
    }), 
    new HtmlWebpackPlugin({ 
     // 'html!' + path.join(src_path, 'index.html') 
     template: path.join(__dirname, '/index.html'), 
     filename: 'index.html', 
     inject: 'body', 
    }), 
    ], 

    module:{ 
    loaders:[ 
     { 
     test: /\.js?/, 
     include: SRC_DIR_APP, 
     loader: "babel-loader", 
     query:{ 
      presets:['react','es2015','stage-2'], 
     } 
     } 
    ] 
    }, 
    devServer: { 
     historyApiFallback: true 
    } 
} 

module.exports = config;

Die Verzeichnisstruktur ist:

die Stücke erstellt sind:

chunk {0} 0.bundle.js 2.29 kB {2} 
    + 1 hidden modules 
chunk {1} 1.bundle.js 2.29 kB {2} 
    + 1 hidden modules 
chunk {2} app.bundle.js (app) 0 bytes {3} [initial] 
chunk {3} vendor.bundle.js (vendor) 1.12 MB [entry] 
    + 309 hidden modules 
Child html-webpack-plugin for "index.html": 
    chunk {0} index.html 542 kB [entry] 
     [1] ./~/html-webpack-plugin/lib/loader.js!./index.html 1.43 kB {0} [built] 
     + 3 hidden modules 
webpack: Compiled successfully.

aber in index.html werden nur zwei Skripte hinzugefügt:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Reactjs Basic</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
</head> 
<body> 
    <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-md-offset-2 col-md-8"> 
        <div id="app"></div> 
       </div> 
      </div> 
     </div> 
<script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="app.bundle.js"></script></body> 
</html>

Warum ist es so? Ich möchte alle Stücke auf Nachfrage laden.

Quelle

2017-05-31 learner

Die Chunks, die Sie in Ihrem ursprünglichen HTML sehen, sind nur der Einstiegspunkt Ihrer Anwendung.

Webpack kümmert sich um das Laden der anderen Chunks bei Bedarf, nur wenn dies von der Anwendung und den Benutzerinteraktionen benötigt wird.

Quelle

2017-05-31 08:17:19

Es ist nicht geladen. – learner

Brocken ist nicht in index.html eingefügt in mit webpack reagieren

Antwort

Verwandte Themen