让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。