今回は、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 サイトの他の関連記事にご注目ください。
推奨読書:
Vue2ルーティングナビゲーションフックをカプセル化して実戦で使用
以上がvue-cli モジュールのパッケージ化の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。