webpackにでjsファイルのエントリーポイントを２つにした際に、片方のvueのdataの値が読み込まれない
いつもお世話になっております。
表題について質問です。
現在webpackを利用してコーディングを進めているのですが、
サイトのトップページにしか利用しないjsライブラリ(swiper.js)があるため、
トップページ専用のjsファイルを別途作成しようとエントリーポイントを２つに分けるよう設定しました。
具体的には、
main.js
↓
main.bundle.js
にコンパイルされていたものを、
main.js、swiper.js
↓
main.bundle.js、vendor.budle.js、swiper.js
のように分割されるように変更しました。
ところが、実際にコンパイルしてみると、
swiper.jsのdata(){}内の値が上手くhtml側に渡っておらず以下のエラーが表示されています。
[Vue warn]: Property or method "msg2" is not defined on the instance but referenced during render.
※msg2はチェックのためのダミー値になります。
※siwper.js の mounted()にあるconsole.log()は問題なく実行されます。
以上となりますが、
こちらの原因が分かるかたらいらっしゃったらご教授いただけますと幸いです。
お忙しいところ大変恐縮ですが、宜しくお願い致します。
ソースコード
# package.json
{
"name": "frontend",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "gulp Pug:Serve & webpack serve --config webpack.dev.js",
"build": "gulp Pug:Build & webpack --config webpack.prod.js",
"Lint:js": "eslint './src/**/*.{ts,js}' --fix",
"Prettier": "prettier --write './src/**/*.{ts,js}'",
"Flow": "flow"
},
"devDependencies": {
"@babel/cli": "^7.13.16",
"@babel/core": "^7.14.0",
"@babel/preset-env": "^7.14.1",
"@babel/preset-flow": "^7.13.13",
"autoprefixer": "^10.2.5",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"css-loader": "^5.2.4",
"css-minimizer-webpack-plugin": "^2.0.0",
"csscomb-loader": "^0.0.2",
"eslint": "^7.26.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-import-resolver-webpack": "^0.13.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-flowtype": "^5.7.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4",
"flow-bin": "^0.150.1",
"gulp": "^4.0.2",
"gulp-notify": "^4.0.0",
"gulp-plumber": "^1.2.1",
"gulp-pug": "^4.0.1",
"gulp-sass": "^4.1.0",
"html-webpack-plugin": "^5.3.1",
"mini-css-extract-plugin": "^1.6.0",
"node-sass-package-importer": "^5.3.2",
"postcss-loader": "^5.2.0",
"postcss-sort-media-queries": "^3.9.10",
"prettier": "^2.2.1",
"pug": "^3.0.2",
"pug-plain-loader": "^1.1.0",
"sass": "^1.32.12",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.1.1",
"ts-loader": "^9.1.2",
"typescript": "^4.2.4",
"webpack": "^5.36.2",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3",
"webpack-remove-empty-scripts": "^0.7.1"
},
"dependencies": {
"destyle.css": "^2.0.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"swiper": "5.x",
"vue": "^2.6.12",
"vue-awesome-swiper": "^4.1.1"
}
}
// webpack.common.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
/* ----- パス設定 ----- */
const path = require('path');
const dir = {
src: path.join(__dirname, 'src'),
dist: path.join(__dirname, 'dist'),
};
/* ----- js rules ----- */
const jsRules = {
// *----- js | lint -----*
jsLint: {
test: /\.(ts|js|vue)$/,
exclude: /node_modules/,
// ビルド前に構文チェック
enforce: 'pre',
loader: 'eslint-loader',
options: {
// 構文エラーがあった場合はfixする
fix: true,
},
},
// *----- js | compile -----*
jsCompile: {
test: /\.(ts|js|vue)$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
// *----- typescript | compile -----*
tsCompile: {
test: /\.ts$/,
exclude: /node_modules/,
use: 'ts-loader',
},
};
/* ----- css rules ----- */
const cssRules = {
// *----- css, scss, sass | compile -----*
test: /\.(scss|sass|css)$/,
exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/,
use: [
MiniCssExtractPlugin.loader,
{
// css を js にバンドル
loader: 'css-loader',
options: {
// オプションでCSS内のurl()メソッドの取り込みを禁止する
url: false,
// 0 => no loaders (default);
// 1 => postcss-loader;
// 2 => postcss-loader, sass-loader
importLoaders: 2,
},
},
'csscomb-loader',
'postcss-loader',
'sass-loader',
],
};
/* ----- 設定 ----- */
module.exports = {
entry: {
main: path.resolve(dir.src, 'js/main.js'),
swiper: path.resolve(dir.src, 'js/swiper.js'),
style: path.resolve(dir.src, 'scss/index.scss'),
},
output: {
// 生成先のディレクトリ
path: dir.dist,
// 生成されるファイル名( 出力されるのをbundle )
filename: '[name].bundle.js',
},
resolve: {
// import文のパス指定に node_modules を省略できるようにする
modules: ['node_modules'],
// 拡張子を省略できるようにする
extensions: ['.ts', '.js', '.vue'],
},
module: {
rules: [
jsRules.jsLint,
jsRules.jsCompile,
jsRules.tsCompile,
cssRules,
],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].bundle.css',
}),
new RemoveEmptyScriptsPlugin(),
],
};
// main.js
import Vue from 'vue/dist/vue';
new Vue({
data() {
return {
msg: 'main.js!',
};
},
}).$mount('#app');
// swiper.js
import Vue from 'vue/dist/vue';
new Vue({
data() {
return {
msg2: 'swiper.js!',
};
},
mounted() {
console.log('aaa');
},
}).$mount('#app');
0