vueにwebpackをインストールする方法-フロントエンドQ&A-php.cn

vueにwebpackをインストールする方法

青灯夜游

リリース： 2022-07-25 15:27:31

オリジナル

1849 人が閲覧しました

vue の Webpack は、ノードパッケージマネージャー「npm」または npm イメージ「cnpm」を使用してインストールされます。 Webpack は、最新の JavaScript アプリケーション用の静的モジュールパッケージツールです。node.js に基づいて開発されています。使用する場合は、node.js コンポーネントのサポートが必要です。npm または cnpm を使用してインストールする必要があります。構文は、「npm install webpack -」です。 g」または「cnpm install webpack -g」。

vueにwebpackをインストールする方法

このチュートリアルの動作環境: Windows7 システム、vue3&&webpack4 バージョン、DELL G3 コンピューター。

Webpack とは

本質的に、Webpack は最新の JavaScript アプリケーション用の静的モジュールバンドラーです。 Webpack はアプリケーションを処理するときに、アプリケーションが必要とするすべてのモジュールを含む依存関係グラフを再帰的に構築し、これらすべてのモジュールを 1 つ以上のバンドルにパッケージ化します。

Webpack は、現在フロントエンドリソースのモジュール管理およびパッケージ化ツールとして最も人気があり、依存関係とルールに従って運用環境のデプロイメントと一貫性のあるフロントエンドリソースに多くの疎結合モジュールをパッケージ化できます。オンデマンドでロードされるモジュールのコードを分離し、実際に必要なときに非同期でロードすることもできます。ローダー変換により、CommonsJS、AMD、ES6、CSS、JSON、CoffeeScript、LESS など、あらゆる形式のリソースをモジュールとして使用できます。

Webpack は、node.js に基づいて開発されたフロントエンドパッケージングツールであり、使用する場合は、node.js コンポーネントのサポートが必要です。

Webpackのインストール

① Webpackの動作にはNode.jsが必要となるため、まずNode.jsをインストールする必要があります。

インストールが完了したら、コマンドラインウィンドウに次の 2 行のコマンドを入力し、バージョン番号が表示されればインストールは成功です。

node -v
npm -v

ログイン後にコピー

② 次に、npm (Node.js ベースのパッケージ管理ツール) を介して Webpack をインストールします。

npm install webpack -g			#打包工具
npm install webpack-cli -g		#客户端

ログイン後にコピー

ただし、npm のソースが海外にあるため、インストール速度が遅い可能性があります。タオバオのnpm Mirror cnpmを使用することをお勧めします。ただし、注意すべき点は、cnpm の一部のパッケージが異なることです (一般的に、使用には影響しません)

cnpm の構成は、次のコード行で完了できます

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

ログイン後にコピー

cnpm を使用する Webpack をインストールする:

cnpm install webpack -g

ログイン後にコピー

テストインストールが正常に完了する:

webpack -v
webpack-cli -v

ログイン後にコピー

Configuration

#Webpack を作成する.config .js 設定ファイル
entry: エントリファイル、Webpack がプロジェクトのエントリポイントとして使用するファイルを指定します
output: 出力、処理する Webpack を指定します完成したファイルを指定したパスに配置します
module: さまざまな種類のファイルの処理に使用されるモジュール
plugins:プラグイン (ホットアップデート、コードの再利用など)。
resolve: ポイントへのパスを設定します。
watch: モニター、ファイルの変更を設定した後、直接パッケージ化するために使用されます

module.exports = {
    entry: "",
    output: {
        path: "",
        filename: ""
    },
    module: {
        loaders: [
            {test: /\.js$/, loader: ""}
        ]
    },
    plugins: {},
    resolve: {},
    watch: true
}

ログイン後にコピー

webpack コマンドを直接実行してパッケージ化します。

Webpack の使用

1. プロジェクトを作成します

vueにwebpackをインストールする方法

D:\Project ディレクトリに webpack-study の空のディレクトリを作成します。次にIDEAで開きます。

2. modules という名前のディレクトリを作成し、JS モジュールなどのリソースファイルを配置します

vueにwebpackをインストールする方法

3. モジュールの下に hello .js などのモジュールファイルを作成します。 JS モジュール関連のコード

//暴露一个方法sayHi
exports.sayHi = function() {
    document.write("<div>Hello WebPack</div>");
};

ログイン後にコピー

4 を記述するために使用されます。モジュールの下に main.js という名前のエントリファイルを作成します。これは、パッケージ化するときにエントリ属性を設定するために使用されます。

//require导入一个模块，就可以调用这个模块中的方法了
var hello = require("./hello")
hello.sayHi();

ログイン後にコピー

require() をインポートするときに、 Java でクラスをインポートするときに .java を追加する必要がないのと同様に、モジュールにサフィックス .js を追加する必要はありません。

これらも ES6 構文に関するものです。

5. プロジェクトディレクトリに webpack.config.js 設定ファイルを作成し、webpack コマンドを使用して

module.exports = {
    entry: "./modules/main.js",			#指定主程序入口文件
    output: {
        filename: "./js/bundle.js"		#指定打包好的文件输出在哪
    }
};

ログイン後にコピー

vueにwebpackをインストールする方法

をパッケージ化します。は追加の ./js /bundle.js

vueにwebpackをインストールする方法

先ほど書いたいくつかの .js ファイルが 1 つの js ファイルになり、すべて圧縮されています。 require() など、私たちが作成した ES6 構文の一部は、ブラウザと互換性を持たせるために ES5 にダウングレードするのに役立つため、このパッケージ化されたファイルには見つかりません。

では、パッケージ化したら使って導入するべきなのでしょうか？

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="dist/js/bundle.js"></script>

</body>
</html>

ログイン後にコピー

を作成します。インポートするとき、作成した hello.js または main.js はすべてインポートする必要はありません。 Bundles .js にパッケージ化されている場合は、

bundle.js を導入するだけです。

index.html を開きます:

vueにwebpackをインストールする方法