Webpack 打包（二）多入口配置及动态切割代码踩坑

本文介绍了项目代码打包构建的时候切割代码，减少引入文件的体积的方法。分享给大家踩坑的经历，也给自己留个记录，方便回顾。

项目基础：

1. 多个页面入口文件
2. 必须引入的有 THREE.JS，ECharts.JS

项目需求：

1. 多入口的相关文件配置
2. js 与 css 文件分离，引入的文件不能过大
3. 必须引入的文件如 THREE.JS，提取到公共资源中

（一）HtmlWebpackPlugin 配置多入口页面

采用的是 HtmlWebpackPlugin 这个插件，这个插件可以帮助我们动态生成 html 文件，自动引入 js 等文件。
由于之前做的是单页面的项目，只需要在 plugins 里配置一次 HtmlWebpackPlugin 就可以了。这次的项目是多入口，所以要遍历入口文件，然后给每个入口配置 HtmlWebpackPlugin，示例如下

const path = require('path');
const fs = require('fs');

// 定义视图页面路径
const viewsPath = path.resolve(__dirname, '../app/views');

 // 定义打包生成的文件夹
const distPath = path.resolve(__dirname, '../dist'); 
// 定义入口
const entries = {};

// 定义 plugin
const plugins = [];  
const dirs = fs.readdirSync(viewsPath);
// 遍历多个入口
dirs.forEach(dir => {
	entries[dir] = `${viewsPath}/${dir}/index.js`

	// Add an html webpack plugin for each entry
	plugins.push(new HtmlWebpackPlugin({
		inject: "body",  // 文件注入的位置
		chunks: [dir,'vendors'],  // 允许被注入的chunk
		filename: `${distPath}/${dir}.html`,  // 生成的文件
		template: `${viewsPath}/${dir}/index.html` // 使用的模板文件
	}));
	
});

（二）MiniCssExtractPlugin 分离 css

采用 MiniCssExtractPlugin 插件来将混合在 js 中的 css 代码分离出来，并单独放置在 css 文件夹下

// 在解析文件中使用 module.rules
	          {
				test: /\.(styl|css)$/,
				use: [
					{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
								publicPath: '/',
                               hmr: devMode, // 仅dev环境启用HMR功能
		            }}]}
// 在plugin中增加配置项		            
plugins.push(
		new MiniCssExtractPlugin({
				filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
				chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css',
			})
	)

filename来指定提取的文件位置，pro环境文件名称增加hash来区分每次打包文件的变化

（三）提取公共资源 splitChunks

splitChunks 里的 cacheGroups 用来提取第三方资源
test设置为 /[\\/]node_modules[\\/]/ 表示只筛选从 node_modules 文件夹下引入的模块

optimization: {
		splitChunks: { 
		        maxSize: 200000,
				cacheGroups: {
					vendors: {  // 抽取第三方的模块
						chunks: 'initial',
						minSize: 30000,
						minChunks: 2,
						test: /[\\/]node_modules[\\/]/,
						priority: 1
				    }
				  }
				}
			}	    

• maxSize 设置为 200000，当单个文件大小超过 200kb 时，就分割成 n 个 200kb 的文件
• minChunks 参数设置为2，即至少有两个chunk引入的模块时进行拆分