[Webpack 5] externals

웹팩 설정에 externals라고 있습니다. 이 옵션은 번들 파일에서 의존성을 제외하는 방법을 제공합니다. 대신에 사용자 환경에 있는 의존성을 필요로 합니다. 공식문서에 나오는 표현인데 코드로 보면 이해가 빠를 겁니다.

module.exports = {  
  mode,
  entry: {
    main: "./src/app.js",
  },
  output: {
    filename: "[name].js",
    path: path.resolve("./dist"),
    assetModuleFilename: "[name].[ext]?[hash]",
  },
  devServer: {
    client: {
      overlay: true,
      logging: "error",
    },
    proxy: {
      "/api": "http://localhost:8081",
    },
    hot: true,
  },
  externals: {
    axios: "axios",
  }  
};

axios 라이브러리를 번들링에서 제외시키기 위해 externals 옵션에 추가했습니다. 그러고 나서 사이트에 접속해봅시다.

axios를 못 찾습니다. 첫 문단에서 말했듯 사용자 환경에서 의존성을 구성해야 합니다.

이 때 copy-webpack-plugin을 사용합니다.

보통은 라이브러리가 node_modules에 위치할 테니까, 여기에 위치한 axios 파일을 dist 파일로 복사해봅시다.

플러그인 프로퍼티에 추가하면 됩니다.

    new CopyPlugin({
      patterns: [
        {
          from: "node_modules/axios/dist/axios.min.js",
          to: "./axios.min.js",
        },
      ],
    }),

빌드를 다시 하면 dist에 axios가 추가되고, 위의 오류는 사라질 겁니다.