WebPackの作成(1)

3371 ワード

ネットワークパッケージ webpack vue VisualStudio テキストリンク

相対パス

npm init -y

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

i-D(インストール.-Dは開発性に依存)

Webpack(Webpackパッケージのインストール)

Webpack-cli、webpack-dev-serverは、2つのパッケージをインストールすることを意味します.

次のステップは何ですか?(Webpack-cliとwebpack-dev-serverパッケージの2つのバージョンをインストールするには、それらを一緒に貼り付けます)

一度に3つのパッケージをインストール
(プロジェクトを作成するフォルダでVisualstudiocode端末を開く必要があります)
Initで梱包します.jsonファイルを生成します.

package.jsonファイル設定スクリプト

を開く

元のサーバを実行する場合は、webpack-dev-serverを実行する必要がありますが、

上のスクリプト設定により、開発(開発モード)サーバを簡単に駆動できます.

bulidは写真(生産:製品モデル)

にも作成できます

ファイルのルート部分にindexを作成します.htmlを作成します.

reset-css link

を取得

<!--reset-css란 기존 브라우저가 가지고있는 스타일들을 모두 초기화 시켜준다-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">

3行目:
require(「path」)はnodejsに含まれるモジュールです.

dirnameは現在のファイルのパスを表します.

整理すると.js/main.jsに関連するすべてのファイル

pathのパスmainに設定します.これはjsモジュール化出力を意味する

distはデフォルトのパス名です.

デフォルトでは、

バージョンのjs名出力を生成します.
(例えばmain.)js => build =>/dist/main.js

に出力

// -D 개발자 모드
// 개발서버 open하기 위한 패키지 다운로드
npm i -D html-webpack-plugin

npm run dev

がこのように動作する

が見られます.

npm i -D copy-webpack-plugin // 정적 파일 연결에 필요한 패키지

私が作った接続静的パッケージのインストール後、下図に従って

を設定してください.

の静的ファイルをdistフォルダにコピーできるパッケージです.

npm runを構築することによって

を確認する.

の画像、js、htmlファイルがdist出力の

であることがわかる.

npm i -D css-loader style-loader // css,stylesheet 읽어주는 패키지를 다운받는다

この問題について(WebPackの作成(1)), 我々は、より多くの情報をここで見つけました https://velog.io/@ddpound/WebPack-생성하기1

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol