vue-cli 의 webpack babel-loader의 기본 설정은 node_modules 패키지를 제외하도록 설정되어있다.
따라서 node_moudles 에서 transpile 되어야하는 패키지가 있는 경우 따로 설정하라고 안내되어있다.
transpileDependencies (vue.config.js)
If the dependency is written in an ES version that your target environments do not support: Add that dependency to the transpileDependencies option in vue.config.js. This would enable both syntax transforms and usage-based polyfill detection for that dependency.
build.transpile (nuxt.config.js)
If you want to transpile specific dependencies with Babel, you can add them in build.transpile. Each item in transpile can be a package name, a string or regex object matching the dependency's file name.
// vue.config.js
configureWebpack: {
//.. optimization 추가
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
// [중요!] cacheGroups는 Webpack이 청크를 output 파일로 그룹화하는 방법에 대한 규칙을 정의하는 곳입니다. 이 설정을 통해 각 패키지별로 청크를 그룹화
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('@', '')}`;
},
},
},
},
//...
}
// nuxt.config.js
export default {
// 중략
build: {
optimization: {
// 위 optimization 설정값과 동일
}
}
설정값 전/후를 비교하면
분리 전
분리 후 (vendors/app.js 에 담겨있던 modules 들이 각각의 파일로 담겨있다.)
따라서 분리 후 에러 코드를 보면 어떤 패키지에서 에러가 난건지 확인할 수 있다.
//vue.config.js
module.exports = {
// ...
transpileDependencies: ['strip-ansi']
// ...
};
//nuxt.config.js
module.exports = {
// ...
transpile: [
({ isDev, isLegacy }) => isDev && isLegacy && 'strip-ansi'
],
// ...
};