プロジェクトは、静的リソースパッケージャーとしてwebpackを使用して、electronのプロジェクトで新しいウィンドウを開く必要がある、あなたはwebpackでマルチページエントリを設定することができますことを発見し、今日はelectronでマルチページエントリを設定するためにwebpackを使用しての落とし穴を踏む私の経験について教えてください。
webpackのコアコンセプト
- エントリ: Webpackビルドの最初のステップはエントリから始まります；
- Module: モジュール。Webpackではすべてがモジュールで、モジュールはファイルに対応し、Webpackは設定されたEntryから再帰的に依存するすべてのモジュールを検索します。
- チャンク：コードブロック、複数のモジュールの組み合わせによるチャンク、コードのマージや分割に使用されます。
- 出力: Webpackが一連の処理を経て、最終的に望ましいコードになった結果を出力します。
、マルチページの入口ファイルの設定
エレクトロンビルド後のプロジェクトディレクトリは以下のようになります：
新規ページの作成
vue-cliによって生成されたプロジェクトには、すべてのvueページを処理するためのmain.js main entry jsファイルが1つしかありません。複数のページを作成するには、ページに含まれるコンテンツを保存するために、このページに対応するjsファイルを生成する必要があります。
複数ページのエントリーファイルの設定
electron-vueで作成したプロジェクトには3つのwebpackの設定がありますが、主にwebpack.renderer.configで以下のコードで複数ページのエントリファイルを生成するように設定しています：
HtmlWebpackPluginプラグインのwebpackは、サーバアクセス用のHTMLファイルを単純に作成するために使用されます。新しい HtmlWebpackPlugin にチャンクを記述する必要があり、そうしないと認識されず、ページが読み込まれません。
新しく生成されたページにアクセスするための電子の新しいウィンドウ
electronのsrcのメインファイルにあるindex.jsがメインの処理で、このページに新しいウィンドウを作成し、新しく生成されたHTMLファイルを以下のコードで呼び出します：
const dialpadUrl = process.env.NODE_ENV === 'development' ? `"http://localhost:9080"/.html` : `file://${__dirname}/dialpad.html`新しいウィンドウで開くページのアドレスを作成します。 electronのwin.loadURL(url[, options])には、loaded fileメソッドが含まれています：
- httpReferrer: HTTP Referrer URL。
- userAgent リクエストを開始した userAgent
- httpReferrerHTTP Referrer url
- userAgent リクエストを開始したuserAgent
実際、私はこれらが何なのかよく理解していません。とにかく、私が理解する限りでは、URLはリモートアドレスまたはHTMLファイルのローカルパスからのみ読み込むことができます。
"scripts": {
"buildAll": "node --max-old-space-size=4096 .electron-vue/build.js && electron-builder",
"build": "node --max-old-space-size=4096 .electron-vue/build.js && electron-builder --win -- ia32 --publish always",
"build:dir": "node --max-old-space-size=4096 .electron-vue/build.js && electron-builder -- win --ia32 --dir",
"build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
"build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
"dev": "node --max-old-space-size=4096 .electron-vue/dev-runner.js",
"lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src",
"lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src",
"pack": "npm run pack:main && npm run pack:renderer",
"pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron- vue/webpack.main.config.js",
"pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js"
},
元々複数のウィンドウでipc通信を使ってデータをやり取りしていたのですが、このやり方は面倒なので、複数のウィンドウ間で同じvuexのデータを共有できるvuex-electronプラグインを見つけました。使い方を説明します：
import Vue from 'vue'
import Vuex from 'vuex'
import { createPersistedState, createSharedMutations } from 'vuex-electron'
import modules from './modules'
Vue.use(Vuex)
export default new Vuex.Store({
modules,
plugins: [
createPersistedState(), // データの永続性を作り、不要になったら削除する。
createSharedMutations() // 共有変異を作成する
]
})
同じvuex内のデータを複数のウィンドウで共有できるので、面倒なipc通信が不要になり、データの取得が簡単になります。
