Archives
12-05 12:00
Today
8
Total
287,856
관리 메뉴

FILife

[webpack 4] vendor와 common 합체 본문

내가 자꾸 까먹어서 쓰는 개발 이야기/Vue.js

[webpack 4] vendor와 common 합체

FIL 2019. 3. 14. 12:27
728x90

webpack을 3에서 4로 업데이트 했다.


같은 툴인데 뭐가 얼마나 다르겠나 하고 시작했다.


많이 달랐다.


이 쉐키들...


일단 가장 중요한 요소로, CommonsChunkPlugin 이 deprecated 되어 사용할 수 없게 되었다.


대신 config.optimization.splitChunks 를 사용해야 한다.


샘플만 보고 따라했더니, 기존에 common 으로 묶었던 공통 js가 vendor.js 와 common.js 로 분리되었다.


게다가 css도 단일 파일로 만들던것이 직접 만든 css 파일들이 포함되지 않게 되어버렸다.


구글을 하루 종일 뒤진 끝에 분리 된 파일들을 병합할 수 있었다.


추가/변경 된 부분만 나열하자면 이렇다. (기존 entry 등은 대부분 동일하다)


mode: "none",


env 셋팅이 dev, production 어느것으로든 되어 있어야 하는 모양이다. "none"으로 해두어도 해결 가능하다.


optimization: {
splitChunks: {
cacheGroups: {
default: false,
commons: {
test: /node_modules/,
name: "common",
chunks: "initial",
minSize: 1,
reuseExistingChunk: true,
enforce: true,
},
styles: {
name: 'common',
test: /\.(c|sc|sa|le)ss$/,
chunks: 'all',
reuseExistingChunk: true,
enforce: true
}
}
},
},

가장 골치아팠던 부분이다.


공식문서에 vendor만 있어서 따라했는데, commons 설정 항목이 있었다.


enforce:true 설정이 있으며 entry에 기재 된 common과 자동으로 병합 해 준다.


styles 에서는 reuseExistingChunk: true 설정이 되어있지 않으면, css(또는 공통js인 common.js)를 import하는 각 js마다 css를 따로 생성한다.


styles의 test 항목은 css만 사용하는 경우가 아니라면 scss, sass, less 확장자에 대한 대비를 해주지 않으면 각 js마다 css를 따로 생성한다.


위와 같이 설정하면 node_modules 내의 css와 직접 생성한 css를 모두 common.css로 빌드할 수 있다.


{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},


css 로더는 ExtractTextPlugin을 MiniCssExtractPlugin.loader 로 변경했다.


영향이 있는건지는 아직은 잘 모르겠다.


babel-loader, url-loader, file-loader 등은 그대로 사용하고 있다.


그 외에는 불필요한 메시지 출력이 많아서 hints 항목을 비활성화 한 정도.


performance: {
hints: false
},



0 Comments
댓글쓰기 폼