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/ フォルダーの下のディレクトリーがモジュールとして使用されます。 build/webpack.base.conf.js のエントリーを変更します。ファイルを HTML に挿入する方法です。ここでは、この問題を解決するために html-webpack-plugin プラグインを使用します。次に、デフォルトの html-webpack- を変更する必要があります。 webpack 設定に plugin プラグイン設定 build/plugins .js を追加する

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

build/webpack.dev.conf.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

この記事の事例を読んだ後は、この方法をマスターしたと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事にご注目ください。

推奨読書:

Angularプロジェクトでscssを使用する手順の詳細な説明

webpackでパッケージ化された大きなファイルを扱う方法

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