Q&A
いつも大変お世話になっております。
表題についてお尋ねしたいことがあります。
現在試行錯誤しながら作成した下記に記述している環境下で
コーディングを行っているのですが、swiperがどうしても動きません。
pugやscss、jsのコンパイル等は問題なくできるので気がつかなかったのですが、
swiperに関してはバージョンを上げたり下げたりしても動きすらしません。
ちなみにエラーが出ないのでどこから取り掛かれば良いかわかりません。。
個人的には webpack.common.js が怪しいのでは？と思うのですが、
exclude の値を変更したりしても改善しないです。
どなたか原因が分かる方がいらっしゃればご教授いただけますと幸いです。
環境
webpack : 5
node : v14.16.0
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/, 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'), sub: path.resolve(dir.src, 'js/sub.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(), ], optimization: { splitChunks: { cacheGroups: { vendor: { chunks: 'initial', test: /node_modules/, name: 'vendor', }, }, }, }, };
webpack.dev.js
const { merge } = require('webpack-merge'); const path = require('path'); const commonConfig = require('./webpack.common'); /* ----- パス設定 ----- */ const dir = { src: path.join(__dirname, 'src'), dist: path.join(__dirname, 'dist'), }; module.exports = merge(commonConfig, { mode: 'development', devtool: 'eval-cheap-module-source-map', devServer: { // 開発サーバーの参照ディレクトリ(watchするディレクトリ) contentBase: [ dir.src, path.resolve(dir.src, 'html'), ], // ホットリロードを有効 hot: true, // ポート番号 port: 3000, // コンテンツを監視する watchContentBase: true, }, });
gulpfile.js
const gulp = require('gulp'); const plumber = require('gulp-plumber'); const notify = require('gulp-notify'); const pug = require('gulp-pug'); const pugFiles = [ 'src/pug/**/!(_)*.pug', // 除外ファイル // (基本的に変更時に全ファイルコンパイルされてしまうので、必要なもののみコンパイルするようにする) '!src/pug/page.pug', ]; gulp.task('Pug:Serve', (done) => { gulp.watch('src/pug/', gulp.task('Pug:Dev')); done(); }); gulp.task('Pug:Dev', (done) =>{ gulp.src(pugFiles) .pipe(plumber({ errorHandler(err) { notify.onError(`Error : ${err.message} `); this.emit('end'); }, })) .pipe(pug({ pretty: true, })) .pipe(gulp.dest('src/html/')) .pipe(notify('Pugをコンパイルしました！')) done(); } );
main.js
javascript
1import Vue from 'vue/dist/vue.min'; 2import { Swiper, SwiperSlide } from 'vue-awesome-swiper'; 3 4new Vue({ 5 6 components: { 7 Swiper, SwiperSlide, 8 }, 9 10 data() { 11 return { 12 13 swiperOptions: { 14 15 preloadImages: false, 16 lazy: { 17 loadPrevNext: true, 18 }, 19 speed: 500, 20 spaceBetween: 0, 21 effect: 'fade', 22 loop: true, 23 autoplay: { 24 delay: 7000, 25 disableOnInteraction: false, 26 }, 27 28 }, 29 30 }; 31 }, 32 33}).$mount('#app');
pug
swiper(ref='mySwiper', :options='swiperOptions') swiper-slide スライダー１ swiper-slide スライダー２ swiper-slide スライダー3
あなたの回答
tips
プレビュー
