webpack: CopyWebpackPlugin の詳細な説明、コピー中にファイルの内容を変更する

まとめ

CopyWebpackPlugin は、ソースディレクトリからビルドディレクトリにファイルをコピーするための強力な Webpack プラグインです。この記事では、CopyWebpackPlugin のいくつかの一般的な API を検討し、サンプルコードを提供します。

Web アプリケーションを構築するときは、通常、いくつかの静的ファイル (HTML、CSS、画像など) をソースディレクトリからビルドディレクトリにコピーする必要があります。この機能を実現するには、CopyWebpackPlugin を使用します。このプラグインはソースファイルをビルドディレクトリにコピーでき、コピー動作をカスタマイズできます。

よく使用される API

patterns: コピー元ファイルとコピー先ファイルに関する情報を含む配列。各配列要素は、次のプロパティを持つオブジェクトです。

from: ソースファイルのパスまたはパターン。文字列または正規表現を使用できます。
to: 対象ファイルのパス。文字列または関数を指定できます。
toType: 対象のファイルの種類。'file'またはにすることができます'dir'。デフォルト値はです'file'。
flatten: ソースファイルをターゲットファイルのサブディレクトリにコピーするかどうか。デフォルト値はですfalse。
transform: ソースファイルをコピーする前に変換する機能。

optionsconcurrency: (同時にコピーされるファイルの数) やoverwrite(既存のファイルを上書きするかどうか)など、いくつかのグローバルオプションを含むオブジェクト。
filter：

例

簡単な CopyWebpackPlugin 設定例を次に示します。

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

module.exports = {
    
    
  plugins: [
    new CopyPlugin({
    
    
      patterns: [{
    
    
          from: 'src/index.html',
          to: 'dist/index.html'
        },
        {
    
    
          from: 'src/assets',
          to: 'dist/assets'
        },
        {
    
    
          from: 'src/images',
          to: 'dist/images',
          toType: 'dir'
        },
        {
    
    
          from: 'src/styles.css',
          to: 'dist/styles.css',
          transform: (content, path) => minifyCSS(content)
        },
        {
    
    
          from: '**/*',
          to: './',
          globOptions: {
    
    
            ignore: ['**/*.js', '**/*.scss', '**/*.ts']
          }
        },
        {
    
    
          from: "public/**/*",
          filter: async (resourcePath) => {
    
    
            const data = await fs.promises.readFile(resourcePath);
            const content = data.toString();

            if (content === "my-custom-content") {
    
    
              return false;
            }

            return true;
          },
        },
      ],
      options: {
    
    
        concurrency: 10,
        overwrite: true
      }
    })
  ]
};

この例では、CopyWebpackPlugin インスタンスを作成し、コピーするファイルとディレクトリを指定します。最初のモードsrc/index.htmlはファイルをファイルにコピーしdist/index.html、2 番目のモードはsrc/assetsディレクトリをディレクトリにコピーdist/assetsし、3 番目のモードはsrc/imagesディレクトリをdist/imagesディレクトリにコピーし、4 番目のモードはsrc/styles.cssファイルをdist/styles.cssファイルにコピーし、コピーする前に内容を変換します (例: 圧縮 CSS)。また、同時にコピーするファイルの数や既存のファイルを上書きするかどうかなど、いくつかのグローバルオプションも指定します。

書類

npmjs.com/package/copy-webpack-plugin

webpack: CopyWebpackPlugin の詳細な説明、コピー中にファイルの内容を変更する

まとめ

よく使用される API

例

書類

おすすめ