Copy static files with Webpack 5
webpack
javascript
投稿日: 2024/06/25
更新日: 2024/07/02
This article is a translation of the following article.
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