Webpack实际项目打包文件解析

webpack版本2.6+以上，我们先看下一般项目run npm dev运行后的实际打包效果。

       公共组件和业务组件分离打包，可有效的提高打包速度，打好****.dll.js后，修改业务代码我们就不需要重新打包，dll文件打包我们使用DllPlugin插件，打包配置写在webpack.dll.js文件内，简单分为三个dll模块。

第一个模块为兼容性组件取名为shim.dll.js，它包括ie兼容性组件，热部署刷新组件，支持react16所必须组件，支持antd所必须组件。

shim: ["console-polyfill","babel-polyfill","react-hot-loader/patch",
  "raf/polyfill", // 支持 react16 所必须
  "media-match", // 支持 antd 所必须
]

第二模块为一些常用组件取名为public.dll.js，它包括axios等，第三模块为前端框架组件取名为vendor.dll.js，它包括react，redux等。

        我们再来看看webpack.config.js文件

const addPagePlugin = name => {
	const app = name ? name + "/index" : "index";
	commonConfig.entry[app] = [
		path.resolve(__dirname,"src/views/" + app + ".js"),
	];
	commonConfig.plugins.push(
		new HtmlWebpackPlugin({
			filename: app + ".html",
			template: path.resolve(__dirname,"src/index.html"),
			title: app + " Home Page",
			chunks: ["shim", app],
			chunksSortMode: "manual",
			inject: true,
			xhtml: true,
			hash: true
		}),
		new HtmlWebpackIncludeAssetsPlugin({
			assets: ['static/js/shim.dll.js',......],
			append: false // false 在其他资源的之前添加 true 在其他资源之后添加
		})
	);
};
单页面打包代码：[""].forEach(v => addPagePlugin(v));

       打好dll，我们需要在页面中引用它们，这时我们需要用到HtmlWebpackPlugin插件，chunks主要用于多入口文件，当你有多个入口文件，那就会编译后生成多个打包后的文件，那么chunks就能选择你要使用那些js文件。一般项目中，除了shim外，其它的组件均在index入口文件引用，因此我们chunks: ["shim", app]有两个入口文件，HtmlWebpackIncludeAssetsPlugin可以使得我们不需要在页面中写<script>来引用打包好的dll文件，它会把打包好的dll文件自动append到页面尾部，其它配置我们稍后有时间再写。

github代码地址https://github.com/fangshuiguang/react-ant-ie9.git