Webpack 파일복사. copy-webpack-plugin

파일을 복사하기 위해서 우선 복사할 파일에 대한 대상을 선정해야 한다. 

내 경우 assets에 있는 파일과  index.html 파일이 대상이 되었다. 

bulid된 파일은 ./dist 폴더로 이동해야 한다. 또한  index.html 파일 역시 dist폴더로 이동해서

dist폴더만 복사해서 올리면 모든 마무리되는 형태로 갖추려 한다. 

이를 위해  먼저 default로 entry에 main으로 설정된 경로를 index로 동일하게 맞춰주어야 했다. 

    entry:{

        index: "./index.js",

    },

 

이제 index.js는 dist에서  만들어진 파일과 루트의  index.html이 호출하는 경로가 같아졌다. 

copy-webpack-plugin 을 설치 하기 위해 다음과 같이 설정한다. 

 

npm install --save-dev copy-webpack-plugin

 

설치가 되었으면 plugin을 추가한다. assets와 같은 폴더는 public이라는 폴더에 있으므로 

public/assets에 옯겨놓아도 되고  그냥 assets를 사용해도 된다. 내 경우 

webpack 버전과 webpack없이 사용이 가능하도록 하는 비웹팩 버전을 그대로 사용하기 위해 

별도의 public 폴더를 만들고 싶지 않았다. 

따라서 프로젝트 폴더에 있는 assets를 그대로 사용하기로 했다. 

 

const path = require("path");

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {

    mode: "development",

    devServer:{

        port:5000

    },

    entry:{

        index: "./index.js",

    },

    output:{

        filename:"[name].js",

        path: path.resolve("./dist"),

    },  

    plugins: [  // 👈 설정

        new CopyPlugin ({

            patterns:[

                { from: "assets", to: "assets"},

                { from: "index.html", to: "index.html"}

            ]

        })

    ],  

    module: {

        rules: [

            {

                assert: { type: "css" },

                loader: "css-loader",

                options: {

                exportType: "css-style-sheet",

                },

            },

        ],

    },

};