파일을 복사하기 위해서 우선 복사할 파일에 대한 대상을 선정해야 한다.
내 경우 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",
},
},
],
},
};