webpack

객체형, 함수형 webpack.config.json

다음과 같이 객체형으로 선언된 파일을 환경변수를 설정하기 위해 함수형으로 변경하니 src폴더를 찾을 수 없다는 에러가 발생하였다. 이는 webpack 설정을 분리하면서 사용한 webpack-merge 때문에 발생한 에러였다. 기존 웹팩 설정 파일은 객체형이였으므로, common을 그대로 사용하면 되었지만, 함수형으로 변경한 이후에는 common()으로 module.exports를 실행해주어야 했다.

// 객체형 선언
module.exports = {
  entry: "./src/index.tsx",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "build"),
    publicPath: "/",
    clean: true,
  },
 .... 
}  

// 함수형 선언
module.exports = () => {
  return {
    entry: "./src/index.tsx",
    output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, "build"),
      publicPath: "/",
      clean: true,
    },
 .... 
}  

module.exports = merge(common, { <--- 기존 webpack.dev.js 파일
  mode: "development",
  devtool: "inline-source-map",
  ....
});

module.exports = merge(common(), { <--- 함수 실행 형태로 변경
  mode: "development",
  devtool: "inline-source-map",
  ....
});

Module.exports, exports

• 둘은 같은 객체를 call by reference로 가르킨다. return되는 값은 항상 module.exports로, 만약 exports에 객체를 할당하게 되면, module,exports와 달라지므로 항상 프로퍼티로 할당해주어야 한다.

자바스크립트 module.export, exports