Bundler

[Webpack] 빌드 시 하위 경로 생성하기

개발가락 2023. 4. 24. 18:57

 

 

Goal

Before
After

 

 

 

Method

output 혹은 각 모듈 플러그인에 대해 filename에 subDir를 명시하면 된다.

 

ex1) JS 번들

module.exports = merge(common, {
  mode: 'production',
  output: {
    filename: 'js/[name].[contenthash:12].js' // 빌드 시, 번들을 js 경로 하위에 빌드
  },
  ...
  }

ex2) CSS 번들

  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/styles.css' //빌드 시, css번들을 css 경로 하위에 빌드
 
    })
  ]