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.

yosi

Table of Contents