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引入的模块,就进行拆分。

发布了7 篇原创文章 · 获赞 6 · 访问量 532
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览