[Vue - Webpack] split chunk (청크파일 분리) 제한 하기

vue.config.js

const webpack = require("webpack");

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1  //분리되는 js와 css파일을 각각 하나로.. 
      })
    ]
  },
  filenameHashing: false, //파일 이름 해싱작업 
  productionSourceMap: false, //운영 레벨에서
};

추가로 productionSourceMap은
빌드 시에 빌드 된 dist폴더 안에 ~~~.js.map파일이 추가되는데 이 파일을 통해 사이트 디버깅이 가능해져서 보안에 취약함. 운여에서 사용하지 않기위해 false로 둠..

	productionSourceMap: process.env.VUE_NODE_ENV !== 'production',

환경 변수로 사용도 가능

filenameHashing 생성되는 파일 이름에 해시값 여부 ( 캐싱 제어를 위함 )

---

---

---

(코드스플리팅 + 지연로딩) 청크 로드 에러
https://stackoverflow.com/questions/53704950/webpack-code-splitting-loading-chunk-failed-error-wrong-file-path

output.publicPath=> 원하는 지점으로 업데이트 하십시오 /dist/.

테스트 해보기