Webpack正在创建多个块

时间:2015-09-15 23:19:40

标签: webpack

让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

对于Backbone.js + React应用程序,我有一个相当简单的Webpack配置。 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会创建两个块而不是一个?我理解,有时为一个工件中的延迟加载或捆绑公共代码创建多个块是有益的。但我无法理解为什么Webpack会隐含地拆分bundle.js。

0 个答案:

没有答案