Question

我有以下配置文件：

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>

为什么会这样？我想按需加载所有块。

Answer 1

您在初始HTML中看到的块只是应用程序的入口点。

只有在应用程序和用户交互需要时，Webpack才会根据需要加载其他块。

在使用webpack做出反应时，未在index.html中插入块

1 个答案: