seperate_chunk_plugin

SeperateChunkPlgin

这是一个webpack插件，你可以通过配置文件将你的所有依赖的文件，自定义打包在一起。

维护者: janzenzhang

Installation 安装

通过npm安装： Install the plugin with npm:

$ npm install seperate_chunk_plugin --save-dev

基本用法 Basic Usage

在第一次使用的该插件的时候，插件会将所有依赖的模块，各自打包为一个文件，并不会打包成一个完整的文件。你也可以配置一个文件夹路径，让在这个路径下的文件都打包成一个文件。比如node_modules这样的文件夹下的依赖。都打包在一个文件内。

config as follows: 按如下方式使用：

var  = require('html-webpack-plugin');
var webpackConfig = {
	entry: 'index.js',
	output: {
		path: 'dist',
		filename: '[name].js'
	},
	plugins: [
		new SeperateChunkPlugin({
			bundleFiles: ['node_modules'], //初次打包的时候会把文件夹下面的打包在一起。
			outputScriptPath: './build/load.build.js' //输出script标签的文件位置。
		})
	]
};

执行以后，每一个被依赖模块都会生成一个单独的文件，并不会打包成一个文件。并且，会在在项目路径下生成seperate.config.js文件，该文件包含了关于如何打包的配置文件。你可以手动将不同的文件放到一个数组内，意味将这些文件都打包在一起，这个数组的key值便是这个bundle文件的文件名称。

module.exports = {
	"components/b": [
		"components/b.jsx"
	],
	"index": [
		"index.jsx"
	],
	"node_modules": [
		"node_modules/react/react.js",
		...
	]
}

但是，由于文件非常多，在html使用script标签加载文件的时候，需要有一定的顺序。所以用户必须使用插件提供的script标签，复制到html里面，来加载文件。这个会在命令行输出给用户，也可以输出成一个文件。

<script src="./build/dest/common.js"></script>
<script src="./build/dest/components/MyButtonController.js"></script>
<script src="./build/dest/stores/ListStore.js"></script>
<script src="./build/dest/node_modules/webpack/node_modules/node-libs-browser/node_modules/events/events.js"></script>

配置Configuration

你可以使用配置的对象值初始化插件。可以使用以下配置项。 You can pass a hash of configuration options to Seperate_chunk_plugin. Allowed values are as follows:

• bundleFiles: 数组，文件夹的名称。把文件夹下面的文件都打包成一个文件。
• outputScriptPath:可以将生成script标签和对应的json生成成一个文件，放到指定的文件里上。