BinaryDevelop
  1. ホーム
  2. ウェブパック

copy-webpack-pluginの有用性・活用について

2022-02-28 01:51:25
<パス

html-webpack-plugin を使って webpack をパッケージ化する際、テンプレートで指定した demo.html にローカルスクリプトファイルがいくつか導入されており、パッケージ化後に必ず「ここにファイルが見つからない」とレポートされます。 

//This is the local test.js file introduced in this demo.html
<body>
	<script src="js/test.js"></script>  
</body>

パッケージング後、test.jsファイルが見つからないことがわかりました。
エラーメッセージを見た後、クリックして原因を調べました。パッケージング後のindex.htmlがdist/ディレクトリにあり、dist/の下にtest.jsファイルがないことが判明しました。

解決策としては、dist/下のdemo.htmlで紹介されているtest.jsファイルを手動でdist/にコピーすれば問題は解決します。しかし、手動でやるのは面倒なので、copy-webpack-pluginの出番になり

copy-webpack-pluginは、ファイル、またはフォルダをコピーするために使用します。ここでは私が設定しましたが、詳しい使い方はウェブサイトを参照してください。 コピーウェブパックプラグイン 

new CopyWebPackPlugin( // Copy the static resources introduced in demo.html to dist, solving the problem that the static resources introduced in index.html could not be found after the previous package
            [
                {
                    from: path.resolve(__dirname, '. /js'), // the path to the folder where the test.js is introduced in demo.html
                    to: path.resolve(__dirname, '. /dist/js'), // the path of the test.js in the dist folder after packaging in dist 
                  },
   		    ])

この設定後、パッケージのindex.htmlにtest.jsが表示されるようになり、問題は解決されました。 

new CopyWebpackPlugin([{
    from: path.resolve(__dirname, '. /'src/static) // Copy all the files inside static at once
    /* If there are multiple files in static, you don't need to write out the files in static one by one
   {
                    from: path.resolve(__dirname, '... /src/static/images'),
                    to: path.resolve(__dirname, '... /dist/static/images'), to: path.resolve(__dirname, '... /dist/static/images')
                },
                {
                    from: path.resolve(__dirname, '. /src/static/icons'),
                    to: path.resolve(__dirname, '... /dist/static/icons'), { from: path.resolve(__dirname, '. /dist/static/icons')
                },
                */
}]);

ps: これは私が使用する過程で踏んだ落とし穴であり、あなたと共有するためにそれを書き、何かが間違っている場合は、修正するために歓迎します。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します