Webpack正在创建多个代码块。

Question

在成功使用Webpack后，我注意到它为我的应用程序创建了两个块：

❯ webpack
Node#removeSelf is deprecated. Use Node#remove.
Hash: aeeab0ba1624cbd503eb
Version: webpack 1.12.1
Time: 5775ms
                                 Asset     Size  Chunks             Chunk Names
  f4769f9bdb7466be65088239c12046d1.eot  20.1 kB          [emitted]
448c34a56d699c29117adc64c43affeb.woff2    18 kB          [emitted]
 fa2772327f55d8198301fdb8bcfc8158.woff  23.4 kB          [emitted]
  e18bbf611f2a2e43afc071aa2f4e1512.ttf  45.4 kB          [emitted]
  89889688147bd7575d6327160d64e760.svg   109 kB          [emitted]
                             bundle.js   234 kB       0  [emitted]  main
                           1.bundle.js  2.96 MB       1  [emitted]
                       styles/main.css   132 kB       0  [emitted]  main
   [0] multi main 52 bytes {0} [built]
   [2] ./dev/js/lib/jquery/jquery-2.1.3.min.js 84.3 kB {1} [built]
  [14] ./dev/js/lib/bacon/bacon.js 111 kB {1} [built]
  [18] ./dev/js/lib/backbone/backbone.js 61 kB {1} [built]
  [19] ./dev/js/lib/lodash/main.js 407 kB {1} [built]
 [205] ./dev/js/lib/marked/marked.js 28.2 kB {1} [built]
 [219] ./dev/js/lib/d3/d3.js 335 kB {1} [built]
 [220] ./dev/js/lib/nvd3/nv.d3.js 556 kB {1} [built]
    + 302 hidden modules

我有一个相对简单的Webpack配置，用于Backbone.js + React应用程序。Webpack仅用于将JS和CSS分别打包：

var webpack = require('webpack');
var path = require("path");
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var embedFileSize = 65536;

function getEntrySources(sources) {
    if (process.env.NODE_ENV !== 'production') {
        sources.push('webpack-dev-server/client?http://localhost:8080');
        sources.push('webpack/hot/only-dev-server');
    }
    return sources;
}

module.exports = {
    resolve: {
        modulesDirectories: ['dev/js/src', 'dev/style/src', 'node_modules'],
        extensions: ['', '.js', '.jsx']
    },
    devtool: 'eval',
    entry: getEntrySources(['./dev/js/src/main.js']),
    output: {
        //publicPath: 'http://localhost:8080/',
        path: path.join(__dirname, 'build'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {test: /\.jsx?$/, exclude: [/node_modules/, path.join(__dirname, "dev/js/lib")], loaders: ['babel-loader']},
            {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") },
            {test: /\.less$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")},
            {test: /\.svg/, loader: 'url?limit=' + embedFileSize + '&mimetype=image/svg+xml'},
            {test: /\.png$/, loader: 'url?limit=' + embedFileSize + '&mimetype=image/png'},
            {test: /\.jpg/, loader: 'url?limit=' + embedFileSize + '&mimetype=image/jpeg'},
            {test: /\.gif/, loader: 'url?limit=' + embedFileSize + '&mimetype=image/gif'},
            {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
            {test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
            {test: /\.html$/, loader: "file?name=[name].[ext]"}
        ]
    },
    plugins: [
        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en|no|hu/),
        new ExtractTextPlugin("styles/[name].css", {
            allChunks: true
        })
    ]
};

Webpack为什么会创建两个chunk而不是一个？我知道有时候创建多个chunk对于懒加载或者将公共代码捆绑在一起是有好处的。但是我不明白为什么Webpack会隐式地分割bundle.js。

- yarinbenado

---

这可能是因为你的入口点是一个数组，即使它只有一个条目。Webpack 会为多个入口文件生成代码块。 - wegry

当请求懒加载（在代码中）时，将生成bundle.js。例如，使用System.import时。 你能提供/dev/js/src/main.js吗？ - Marc

如果您正在使用loadChildren进行懒加载模块，则可以这样做。 - bokkie

Answer 1

您正在使用extract-text插件。它会将原始捆绑包中的所有CSS提取出来，并生成一个单独的CSS捆绑包。

对于1.bundle.js，您是否使用了代码分割？这将使其他捆绑包能够按需延迟加载单独的捆绑包。

- stian64