VUE3 入門チュートリアル: Webpack を使用したパッケージ化とビルド

Vue は、インタラクティブで効率的な Web アプリケーションを迅速に構築するのに役立つ優れた JavaScript フレームワークです。 Vue 3 は Vue の最新バージョンであり、多くの新機能が導入されています。 Webpack は現在最も人気のある JavaScript モジュール パッケージャーおよびビルド ツールの 1 つで、プロジェクト内のさまざまなリソースの管理に役立ちます。

この記事では、Webpack を使用して Vue 3 アプリケーションをパッケージ化してビルドする方法を紹介します。

1. Webpack のインストール

まず、Webpack をローカルにインストールする必要があります。 npm パッケージ マネージャーを使用してインストールできます。次のコマンドを入力します。

npm install --save-dev webpack webpack-cli

注: ここでインストールされるのは、Webpack バージョン 4 以降です。

2. Vue プロジェクトの作成

Vue 3 プロジェクトを作成する必要があります。プロジェクトの作成には、Vue@vue/cli が提供する公式ツールを使用できます。 。次のコマンドを入力してインストールします。

npm install -g @vue/cli

インストールが完了したら、次のコマンドを入力して Vue 3 プロジェクトを作成します。

vue create my-project

ここで、my-project はプロジェクト名を使用することも、自分で定義する必要があります。

Vue 3 プロジェクトを作成したら、それを Webpack で使用する必要があります。プロジェクトのルート ディレクトリで、npm パッケージ マネージャーを使用して Webpack と関連するローダーとプラグインをインストールし、次のコマンドを入力します:

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D
npm install --save-dev vue-loader vue-template-compiler css-loader style-loader sass-loader sass node-sass

その中で、webpack-dev-server は、 Webpack の開発サーバー、ローカル デバッグが可能; html-webpack-plugin は HTML ファイルの追加に使用されます。 vue-loader および vue-template-compiler は、.vue ファイル、css-loader、style-loader、# を解析するために使用されます。 # #sass-loader および sass、node-sass は、スタイル ファイルの処理に使用されます。

3. Webpack の設定

Webpack のさまざまなパラメーターを設定するには、プロジェクトのルート ディレクトリに

webpack.config.js ファイルを作成する必要があります。具体的な内容は次のとおりです。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  devServer: {
    port: 8080,
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
  },
  entry: path.resolve(__dirname, './src/main.js'),
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/',
    filename: 'build.js',
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader',
        exclude: /node_modules/,
      },
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './index.html'),
      filename: 'index.html',
    }),
  ],
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.esm-bundler.js',
    },
    extensions: ['*', '.js', '.vue', '.json'],
  },
};

上記の構成では、

mode は開発モード、entry はエントリ ファイル、output## です。 # は出力ファイルへのパスと名前です。 module の rules は、さまざまなファイルの処理を示します。 plugins は、使用するプラグインを表します。 4. Vue コンポーネントを作成する

プロジェクトの

src

ディレクトリに複数の .vue ファイルを作成します。例として、単純なコンポーネントを次に示します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div&gt;我是一个Vue组件&lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { name: 'my-component' } &lt;/script&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> これは、

my-component

という名前の単純な Vue コンポーネントです。 App.vue でこのコンポーネントを使用できます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div&gt; &lt;my-component /&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import MyComponent from './MyComponent.vue'; export default { components: { MyComponent } } &lt;/script&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>5. プロジェクトを実行します

プロジェクトのルート ディレクトリで、次のコマンドを入力してプロジェクトを実行します:

npm run serve

次に、ブラウザで

http://localhost:8080

にアクセスして、プロジェクトの効果を確認します。 6. プロジェクトをパッケージ化する

開発が完了したら、プロジェクトをパッケージ化してコードのリリース バージョンを生成する必要があります。プロジェクトのルート ディレクトリで、次のコマンドを入力します。

npm run build

Webpack は、プロジェクトのさまざまな部分を

dist

フォルダーにパッケージ化し、生成されたファイルを Web アプリケーションのデプロイに使用できます。 上記は、Webpack を使用して Vue 3 アプリケーションをパッケージ化して構築するプロセス全体です。お役に立てれば幸いです。

以上がVUE3 入門チュートリアル: Webpack を使用したパッケージ化とビルドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。