웹팩 설정하기 2 - CopyWebpackPlugin

CopyWebpackPlugin

CopyWebpackPlugin 모듈은 프로젝트를 빌드할 때 정적 파일을 복사하고 디렉토리를 만들기 위한 도구

왜 사용했느냐..?

프로젝트 진행 중 메타 태그를 설정해야하는데, 나는 빌드 결과물이 dist에 되는 상황

그래서 public에 있는 메타 태그 관련된 것들을 dist 폴더에 복사해줘야 동작하기 때문에 해당 플러그인을 설치하고 진행

진행

npm i copy-webpack-plugin --save-dev

// webpack.config.js

module.exports = (env, argv) => {
	const isProduction = argv.mode === "production";
    
	return {
    	mode: isProduction ? "production" : "development";
        ...code,
        plugins: [
        	new CleanWebpackPlugin(),
            new HtmlWebpackPlugin({
            	template: path.resolve(__dirname, "src", "index.html"),
            }),
            new Dotenv({
            	...code
            }),
            new CopyWebpackPlugin({
       			patterns: [
          			{ from: "public/manifest.json", to: "manifest.json" },
          			{ from: "public/favicon.ico", to: "favicon.ico" },
        		],
      		}),
        ]
    }
}

webpack에서 해당 설정 해줌으로 인해서 public -> dist로 복사되고,
HtmlWebpackPlugin에서 설정한 index.html로 이동하여 <link />태그 작성해야함.(/favicon.ico, /manifest.json)

파일 복사해도 브라우저가 읽으려면 HTML의 <link /> 같은 태그가 있어야 함.

결론

webpack은 파일을 복사해주는 역할
HTML은 브라우저에서 이 파일을 어디서 읽을지 알려주는 역할