npm 라이브러리 버전 올리기
이름 |
구 버전 |
현 버전 |
|
webpack |
3.8.0 |
4.44.2 |
|
webpack-dev-server |
2.9.7 |
3.11.3 |
|
webpack-cli |
X |
3.3.0 |
|
html-webpack-plugin |
2.30.1 |
3.2.0 |
|
vue-loader |
13.3.0 |
14.2.2 |
|
uglifyjs-webpack-plugin |
1.1.1 |
X |
|
extract-text-webpack-plugin |
3.0.2 |
4.0.0-beta.0 |
|
@babel/core |
X |
7.23.2 |
|
@babel/preset-env |
X |
7.23.2 |
|
babel-loader |
7.1.1 |
8.2.5 |
|
babel-core |
6.22.1 |
X |
|
babel-preset-env |
1.3.2 |
X |
|
compression-webpack-plugin |
X |
4.0.1 웹팩버전과 맞춰야함 |
|
compression |
X |
1.7.4 serve.js 압축 사용 |
|
빌드 설정 변경
- webpack 3 에서 기존 제공되지 않았던 기능들을 플러그인으로 대체해 사용하였지만 webpack 4 에서는 기본 제공하는 기능이 되어 빌드설정 변경
- webpack.IgnorePlugin : 플러그인 중 필요한 모듈만 사용하고 사용하지 않는 모듈들은 빌드되지 않도록 하는 설정 ex) moment.js / locale
- vendor 에 모든 npm 이 다운로드 되어 초기렌더링 속도가 느림, 각각 패키지를 다운하도록 변경
- 난독화한(Uglify) 코드에 gzip(GNU zip) 알고리즘을 써서 더 압축 : js 파일을 .gz 파일로 압축하고 브라우저에서 .gz 파일을 열수 있도록 설정
// webpack.config.js
mode: "devlopment",
optimization: {
minimize: true, //UglifyJsPlugin 계승
runtimeChunk: 'single',
splitChunks : {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace('@', '')}`;
},
},
},
},
concatenateModules: true, //ModuleConcatenationPlugin을 계승
},
plugin: [
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/,
}),
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.scss$|\.html$/,
threshold: 10240,
minRatio: 0.8
}),
]