Christian-freedom
commented
7 years ago 例子1：http://blog.csdn.net/github_26672553/article/details/52280655
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var extractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
// entry是入口文件，可以多个，代表要编译那些js
//entry:['./src/main.js','./src/login.js','./src/reg.js'],
entry:
{
'main':'./src/main.js',
'user':['./src/login.js','./src/reg.js'],
'index':['./src/index.js']
},
externals:{
'jquery':'jQuery'
},
module:{
loaders:[
// {test:/\.css$/,loader:'style-loader!css-loader'},
{test:/\.css$/,loader:extractTextPlugin.extract('style','css')}
],
},
output:{
path: __dirname+'/build/js', // 输出到那个目录下（__dirname当前项目目录）
filename:'[name].js' //最终打包生产的文件名
},
plugins:[
new HtmlWebpackPlugin({
filename: __dirname+'/build/html/login-build.html',
template:__dirname+'/src/tpl/login.html',
inject:'body',
hash:true,
chunks:['main','user','common.js'] // 这个模板对应上面那个节点
}),
new HtmlWebpackPlugin({
filename: __dirname+'/build/html/index-build.html',
template:__dirname+'/src/tpl/index.html',
inject:'body',
hash:true,
chunks:['index','common.js'] // 这个模板对应上面那个节点
}),
// css抽取
new extractTextPlugin("[name].css"),
// 提供公共代码
new webpack.optimize.CommonsChunkPlugin('common.js'), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js
]
};CommonsChunkPlugin的使用如下：
new webpack.optimize.CommonsChunkPlugin({
//这段代码的意思是，从上面的entry中的三个入口文件，生成的最终的三个bundles文件，main.js和
user.js和index.js三个文件中，提取出一个在三个文件中都存在的代码，作为一个公共块common.js
name:'common', // 注意不要.js后缀
chunks:['main','user','index']
}),这段代码的意思是，从上面的entry中的三个入口文件，生成的最终的三个bundles文件，main.js和 user.js和index.js三个文件中，提取出一个在三个文件中都存在的代码，作为一个公共块common.js
通过CommonsChunkPlugin，我们把公共代码专门抽取到一个common.js，这样业务代码只在index.js，main.js，user.js。
CommonsChunkPlugin
new webpack.optimize.CommonsChunkPlugin(options)CommonsChunkPlugin 插件，是一个可选的用于建立一个独立文件(又称作 chunk)的功能，这个文件包括多个入口 chunk 的公共模块。通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存起来到缓存中供后续使用。这个带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。配置
webpack1 构造函数
new webpack.optimize.CommonsChunkPlugin(options, filenameTemplate, selectedChunks, minChunks)不再被支持。请使用相应的选项对象。例子
公共chunk 用于 入口chunk (entry chunk)
生成一个额外的 chunk 包含入口chunk 的公共模块。
你必须在 入口chunk 之前加载生成的这个 公共chunk:
明确第三方库 chunk
将你的代码拆分成公共代码和应用代码。
提示：结合长期缓存，你可能需要使用这个插件去避免 公共chunk 改变。 你也需要使用 records 去保持稳定的模块 id。
将公共模块打包进父 chunk
使用代码拆分功能，一个 chunk 的多个子 chunk 会有公共的依赖。为了防止重复，可以将这些公共模块移入父 chunk。这会减少总体的大小，但会对首次加载时间产生不良影响。如果预期到用户需要下载许多兄弟 chunks（例如，入口 trunk 的子 chunk），那这对改善加载时间将非常有用。
额外的异步 公共chunk
与上面的类似，但是并非将公共模块移动到父 chunk（增加初始加载时间），而是使用新的异步加载的额外公共chunk。当下载额外的 chunk 时，它将自动并行下载。
给 minChunks 配置传入函数
你也可以给 minChunks 传入一个函数。这个函数会被 CommonsChunkPlugin 插件回调，并且调用函数时会传入 module 和 count 参数。
module 参数代表每个 chunks 里的模块，这些 chunks 是你通过 name/names 参数传入的。 module has the shape of a NormalModule, which has two particularly useful properties for this use case:
count 参数表示 module 被使用的 chunk 数量。
当你想要对 CommonsChunk 如何决定模块被打包到哪里的算法有更为细致的控制， 这个配置就会非常有用。
正如上面看到的，这个例子允许你只将其中一个库移到一个分开的文件当中，当而仅当函数中的所有条件都被满足了。
This concept may be used to obtain implicit common vendor chunks:
In order to obtain a single CSS file containing your application and vendor CSS, use the following minChunks function together with ExtractTextPlugin:
Manifest file
To extract the webpack bootstrap logic into a separate file, use the CommonsChunkPlugin on a name which is not defined as entry. Commonly the name manifest is used. See the code splitting libraries guide for details.
Combining implicit common vendor chunks and manifest file
Since the vendor and manifest chunk use a different definition for minChunks, you need to invoke the plugin twice:
More Examples
Common and Vendor Chunks Multiple Common Chunks Multiple Entry Points with Commons Chunk