인프런 커뮤니티 질문&답변

webpack5, vue 2.6.x 버전에서 vue.config.js에서 소스 맵들이 전부 노출이 되고 있어서 그것을 막으려고 세팅을 하고 있는데.. productionSourceMap는 false, mode는 production, devtool는 source-map으로 설정을 해 두었는데 크롬 소스 > wepack://의 아무 컴포넌트의 .vue 파일에 style scoped 영역의 css만 노출되고 있는 이유를 잘 몰라서 질문하게 되었습니다.

추가 적으로 시도해본 것은 mini-css-extract-plugin 을 적용 해보았으나 결과는 같습니다..

증상은 아래와 같습니다.

대략적인 프로덕션 빌드 시 요약된 소스만 첨부 드립니다.

productionSourceMap: false,
css: {
    extract: {
      filename: `css/${prdPrefix}.css`,
      chunkFilename: `css/${prdPrefix}.css`,
    },
  },
configureWebpack: {
    plugins: [],
    mode: 'production',
    devtool: 'source-map',
    resolve: {
      alias: {
        moment: 'moment/src/moment',
      },
    },
    optimization: {
      usedExports: true,
      splitChunks: {
        chunks: 'all',
      },
    },
    performance: {
      hints: false,
    },
    output: {
      filename: `js/${prdPrefix}.js`,
      chunkFilename: `js/${prdPrefix}.js`,
    },
  },