[Webpack] webpack option 정리

웹팩을 사용하면서 설정해논 옵션이 어떤 옵션인지 알기 위해서 낱낱히 파해치는 작업을 했었는데,

보기 힘들어서 그냥 따로 정리하기로 했다!

2021.06.25 - [Frontend/Webpack] - [Webpack] 이미 올라가있는 웹팩 설정을 뜯어보자.

[Webpack] 이미 올라가있는 웹팩 설정을 뜯어보자.

공식홈페이지를 많이 참고해서 정리하였으나, 지나가시는 분 중 제 설명에 틀린 점이 있다면 편하게 지적 부탁드립니다 :)

---

context

• 복잡한 상대경로를 쉽게 사용하도록 하는 option

context: path.resolve(__dirname, '../')

 

entry

• 번들 프로세스를 시작할 지점

entry: './src/main.js'

 

 output

• path
• filename : 청크 출력 이름을 별도로 지정 (df. [id].js)
• publicPath

output: {
  path: config.build.assetsRoot,
  filename: '[name].js',
  publicPath: config.dev.assetsPublicPath
}

 

resolve

• extensions : 동일한 이름의 다른 확장자를 가진 파일이라면 배열에 정의한 순서대로 해결하도록 하는 option (해결한뒤 skip)
• alias : 특정 디렉토리를 특정 문자열로 치환해서 사용하기 위한 option

resolve: {
  extensions: ['.js', '.vue'],
  alias: {
    '@': path.join(__dirname, '..', 'src')
  }
}

 

module

• rules : 모듈이 생성될 때 요청에 일치하는 규칙 배열로 모듈이 생성되는 방식을 수정할 수 있는 option

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader'
      options: vueLoaderConfig
    }
    ...
  ]
}