vue-cli マルチモジュールのパッケージ化と使用方法の詳細な説明

今回は、vue-cli マルチモジュール パッケージングの使用について詳しく説明します。vue-cli マルチモジュール パッケージングの 注意事項 は何ですか? 実際のケースを見てみましょう。

シナリオ

実際のプロジェクト開発では、このようなシナリオが発生します。プロジェクトでは複数のモジュール (単一ページまたは複数ページのアプリケーション) を一緒に使用する必要があり、vue-cli はデフォルトで単一エントリのパッケージングのみを提供します。そこで、vue-cli を拡張することを考えました

implementation

まず第一に、webpack が複数エントリのパッケージ化を提供していることを知っておく必要があります。その後、ここから変換を開始できます

新しい build/entry.js

const path = require('path')
const fs = require('fs')
const moduleDir = path.resolve(dirname, '../src/modules')
let entryObj = {}
let moduleItems = fs.readdirSync(moduleDir)
moduleItems.forEach(item => {
 entryObj[`${item}`] = `./src/modules/${item}/main.js`
})
module.exports = entryObj

ここでは Nodejs を使用します。 fs および path モジュールは独自のプロジェクト構成に応じて変更できます。 ここでは、src/modules/ フォルダーの下のディレクトリがモジュールとして使用されます。 各モジュールには、エントリー ファイル

として main.js が含まれています。

.base.conf.js の build/webpack エントリを変更します

const entryObj = require('./entry')
module.exports = {
 entry: entryObj
}

次のステップは、パッケージ化されたファイルを HTML に挿入する方法です。ここでは、この問題を解決するために html-webpack-plugin プラグインを使用します。 HTML テンプレート ファイルを用意し、webpack 設定のデフォルトの html-webpack-plugin プラグイン設定を変更します

build/plugins.js を追加します

const HtmlWebpackPlugin = require('html-webpack-plugin')
let configPlugins = []
Object.keys(entryObj).forEach(item => {
 configPlugins.push(new HtmlWebpackPlugin(
  {
   filename: '../dist/' + item + '.html',
   template: path.resolve(dirname, '../index.html'),
   chunks: [item]
  }
 ))
})
module.exports = configPlugins

build/webpack.dev.conf.js 設定を変更します

module.exports = {
  plugins: configPlugins
}

この記事の事例などを読んで、あなたはその方法を習得したと思います。とても興味深いですね。php 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

bing Map を使用する手順の詳細な説明

node+token 実装の検証

以上がvue-cli マルチモジュールのパッケージ化と使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。