塊不index.html中插入使用的WebPack

反應我有以下配置文件：塊不index.html中插入使用的WebPack

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;

的目錄結構是：

創建的塊是：

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.

但在index.html中，只添加了兩個腳本：

<!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>

這是爲什麼？我想按需加載所有的塊。

來源

2017-05-31 learner

您在初始HTML中看到的塊只是應用程序的入口點。

只有當應用程序和用戶交互需要時，Webpack纔會按需加載其他塊。

來源

2017-05-31 08:17:19

尚未加載。 – learner

塊不index.html中插入使用的WebPack

回答

相關問題