webpack4는 공통 코드를 뽑아

웹팩 공통의 코드 최적화가 당기면가
설명하는 작은 예를 취할
예를 들면 : 우리는 여러 페이지 항목 코드 생성
webpack.config.js의를

entry:{
		index:'./src/index.js',
		other:'./src/other.js'
},
output:{
		filename:'bundle.[name].js',
		path:path.resolve(__dirname,'dist/')
},

하는 index.js 파일에서

import './util.js';
import $ from "jquery";
console.logh('这里是index.js文件')

other.js에서

import './util.js';
import $ from "jquery";
console.logh('这里是other.js文件')

우리는 포장이 시간, 다음 경우
성공을 생성하는 동안 bundle.index.js 모두를 생성하고 DIST 폴더에 파일을 bundle.other.js
하지만이 둘의 js 파일에 의해 발생 된 문제를 찾을 수 JQuery와 및 폴더의 유틸리티 내부에 포장되어 의 .js 파일
어쩌면 우리가 원하기 때문에 이것은 분명히 우리 적합하지 않습니다되는 파일은 동일한 코드 블록을 소개 한
코드의 도입의 소개 페이지의 공용 부분은 배가이 공공의 일부가 아닌 경우 꺼낼 수 없을
이 시간 웹팩은 이러한 구성이

optimization:{  // 抽离公共样式
		splitChunks:{ // 分割代码块
			cacheGroups:{  //缓存组
				common:{  // 公共的模块
					chunks:'initial',
					minSize:0,
					minChunks:2   // 公共的代码块 引入 最小数量 在俩个文件中都引入 
				},
				vendor:{  //  处理第三方插件库 不是自己定义的
					priority:1,  // 升级权重 先执行这个  要不上面的代码执行了下面就不会执行了
					test:/node_modules/, // 把你抽离出来
					chunks:'initial',
					minSize:0,
					minChunks:2
				}
			}
		}
	},

위의 bundle.common - 인덱스 other.js 공공 사용자 지정 코드 블록
bundle.vendor - 인덱스 other.js 플러그인 라이브러리가 바로 jQuery 라이브러리 써드 파티
우리는 우리가 필요로하는 결과를 직접 수행하는 공공 코드로 포장 있도록이 동일한 코드 패키지의 중복을 피하기 위해 아주 좋은

그래서 쓴 인생, 왜 자신에게 사탕을 너무주지! 그것에 충실! 당신은 다른보기를 볼 수 있습니다!