webpack

Pacell-Bundlerのような仕事を始めましたWebpack.

1.プロジェクトフォルダを作成したら、端末を開き、以下のコマンドでインストールします。

インストールには-Dが付属しており、3つのパッケージを開発インストールするために使用されています.

webpack-dev-serverはwebpack-cliの主なバージョンと一致する必要があるため、@nextを追加し、

をインストールする.

$ npm i -D webpack webpack-cli webpack-dev-server@next

2.スクリプトの追加

開発サーバおよび製品導入ファイルを生成するためのスクリプトを追加します.

"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production"

webpack:基本pkg.webpack-cli:pkg-->スクリプト内のコマンドは、CLI(comand line interface)をサポートするために使用できます.webpack-dev-server:live serverのpkg.

3. webpack.config.js

entryの送り継ぎ手は複数設定できます.

4.オープン開発サーバー

distフォルダにインデックスします.htmlを生成するために追加パッケージをインストールします.

$ npm i -D html-webpack-plugin

5. copy-webpack-plugin

distフォルダに開発ファイルのコピーを作成するためのプラグイン.
次の図は、staticフォルダの内容をコピーします.
webpack.congig.jsファイルに追加する関数を作成します.$ npm run buildコマンドを実行すると、結果を表示できます.