Webpack 4回目-設定ファイルの導入

https://youtu.be/gj9RKSXW_vc

符号化生成されたjs,sass,pngなど多くの異なるファイル(リソース)をWebパケットとして処理すると,いくつかの単純な形式のファイルが生成される.

Web Pack学習時の注意点

はどのようにして様々な形式のリソースをWebパッケージに送信しますか?

これらのリソースをどのように加工しますか?

=>最終的に開発や導入に有利な形に加工するのは、Webパッケージを使用する傾向です.
このストリームを制御する方法は、プロファイル(webpack.config.js)です.

設定ファイルの作成

前回使用したnpx webpack--entry./source/index.js --output-path ./public --output-filename index_bundle.jsというコマンドを書くたびに不便です.
プロファイルを使用すると、より簡単に使用できます.
ルートパス上でwebpack.config.jsファイルを生成します.

プロファイルの正式なドキュメントは、WebパッケージのホームページのDocumentationカテゴリの「構成」メニューから表示するか、「Webパッケージ」から表示することができます.config.jsファイルの例(下図)も表示できます.このドキュメントを参照してプロファイルを作成します.( https://webpack.js.org/configuration/ )

設定

//<webpack.config.js>

const path = require('path'); 

module.exports = {
    entry: "./source/index.js", 
    //entry에 해당 되는 파일 알려줌(--entry ./source/index.js 명령어와 같다.)
    
    output: {
        path:path.resolve(__dirname, "public"),
        
        //__dirname이라는 경로의 public라는 최종 위치(디렉토리 이름) 지정.
       
       filename: 'index_bundle.js' //output 될 파일명 지정.
    }
}

以上、npx webpack--entry./source/index.js --output-path ./public --output-filename index_bundle.jsコマンドなどの内容の設定.
const path = require('path'); ノードです.jsが提供する部品は、ファイルのパスを簡単に制御できます.
dirnameは、現在のファイルが存在するパスを指すnodeです.jsの変数.
dirnameはパスなので、その横に最終位置になるディレクトリ名を書きます.
設定が完了すると、npx webpack--config webpackになります.config.jsコマンドを入力すると、webpackはwebpackになります.config.jsファイルを読み込み、そのファイルの説明に従って操作します.
(バインドされたファイルがある場合は、削除してテストします)
Webパッケージを使用する方法は次のとおりです.
1.コマンドでオプション(ex)--entryなどを使用する方法
2.configファイルに説明を設定する方法があります.
△残りの方法は別の授業で教えてくれるそうです.
webpack.config.jsで約束した名前でプロファイルを作成した場合、npx webpackでwebpackを実行すると、webpackはプロファイルを見つけてコンテンツを読み込みます.
したがって、npx webpackを入力するだけでバインドを実行できます!