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 およびパス モジュール。ドキュメント http://nodejs.cn/api/fs.html、http://nodejs.cn/api/path.html を参照して、独自に変更できます。プロジェクト設定、ここでは src/ です modules/ フォルダーの下のディレクトリがモジュールとして使用され、各モジュールにはエントリーファイルとして main.js があります

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

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

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

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 サイトの他の関連記事にご注目ください。

推奨読書:

vue選択操作部品が有効化

Vue2ルーティングナビゲーションフックをカプセル化して実戦で使用

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