Noh | エンジニア向け情報共有コミュニティ
Signup / Login

Copy static files with Webpack 5

webpack
javascript

投稿日: 2024/06/25

更新日: 2024/07/02

This article is a translation of the following article.

https://noh.ink/articles/AGVcVtm0ddpg8Yu2Br4A

Install the write-file-webpack-plugin. Here, we are installing it as a devDependency, but please move it to dependencies if necessary.

npm i -D copy-webpack-plugin write-file-webpack-plugin

In the following configuration, files and folders located in frontend/from_public will be copied to to_public/packs.

webpack.config.js

const CopyFilePlugin = require("copy-webpack-plugin") ... plugins: [ new CopyFilePlugin({ patterns: [ { context: path.resolve(__dirname, "frontend/from_public"), from: path.resolve(__dirname, "frontend/from_public/**/*"), to: path.resolve(__dirname, "to_public/packs"), }, ], }), ], }

Please write in detail.

frontend/from_public/test.txt ↓ to_public/packs/test.txt
frontend/from_public/test_folder/test.txt ↓ to_public/packs/test_folder/test.txt

The above is how it is done.

It seems like context is used to specify from which layer to copy.

For example, changing the setting to context: path.resolve(__dirname, "frontend"),

frontend/from_public/test.txt ↓ to_public/packs/from_public/test.txt
frontend/from_public/test_folder/test.txt ↓ to_public/packs/from_public/test_folder/test.txt

The above is how it is done.

Table of Contents