webpack公共类库文件打包方法

写在前面

webpack是前端静态资源打包工具。webpack本身的作用就很简单，但是其打包配置，其复杂程度不言而喻。 今天分享webpack公共类库文件打包

methods

这里使用官方推荐的插件 splitchunkPlugin.不在使用webpack 2.版本的commchunkplugin，因为在webpack4中已经移除这一插件。

此插件是webpack包内置，因此无需安装。直接在配置中写入 optimization选项即可

举个列子说明用法：

现在有a.js，b.js两模块需要打包，并且两模块中都引用两jquery模块，此时的jquery模块属于公用依赖。打包的同时，需要将公共模块分离打包出来。

创建一个test directory

test
+ | - node_moudle
+ | - src
	+ | - a.js
	+ | - b.js
+ | - package.json
+ | - webpack.config.js

a.js模块, 导入的jquery.js
import JQ from '../node_modules/jquery/dist/jquery'

b.js模块同上

```.......```

不做打包配置前配置

	const path = require('path');
	
	moudle.exports = {
		 mode:'production',
		 entry: {
		    a: './src/a.js',
		    b: './src/b.js'
  		},
  		output: {
		    path: path.resolve(__dirname, 'dist'),
		    filename: '[name].[chunkhash].js',	
 	 	},
	}

PS: 生产打包输出以文件名 ,以chunkhash为准，方便查阅区分，参考下图打包文件名。

打包结果

分析：可以看到我们入口指定的连个模块已经打包，但是我们公共模块jquery没有显示出来，被分离打包。而是各自打包到了父模块（a.b模块）中。

– 分离打包，配置 –

 mode:'production',
  	entry: {
    	a: './src/a.js',
    	b: './src/b.js'
  	},
  	output: {
    	path: path.resolve(__dirname, 'dist'),
    	filename: '[name].[chunkhash].js',
  	},
  	optimization: {
    	// async 异步(import()语法) initial(同步import xxx from 'xxx') all(所有)
    	splitChunks: {
      	chunks: 'initial' 
    }
  }

打包结果

分析： 我们引入地公共模块已经被抽取出来。查看a,b模块文件，这时模块内容只有导入jquery的语句。而不是上面那样的合并jquery源码打包。

这是打包的目录结构，除了打包了两模块文件，单独打包了公共库文件。

结语

上明的打包方式的作用。通常来说，像vue,react，jquery。这些类库文件的稳定性是很高的，而业务代码就不一样，bug漫天飞那种的喔；） 。我们就需要平凡修改测试打包。对于这种类库文件，我们在首次开发并打包好后，下次项目更新时，我们就不需要在对此打包。有效利用浏览器长缓存，减少服务器流量，提高用户体验。

参考官方教程， 链接：https://www.webpackjs.com/plugins/split-chunks-plugin/