Как заставить Webpack работать с FullCalendar
При сборке c FullCalendar выдает ошибку в консоли Uncaught ReferenceError: FullCalendar is not defined
Импорты в
index.js
import * as $ from 'jquery';
import jQueryUI from 'jquery-ui';
import { Calendar } from '@fullcalendar/core';
import moment from 'moment';
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
initialDate: '2020-10-07',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
});
calendar.render();
});
конфиг webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const flatpickr = require("flatpickr");
module.exports = {
context: path.resolve(__dirname, 'src'),
mode: 'development',
entry: "./index.js",
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, 'dist'),
},
resolve: {
extensions: ['.js', '.json', '.png'],
alias: {
'@': path.resolve(__dirname, 'src'),
}
},
optimization: {
splitChunks: {
chunks: 'all'
}
},
devServer: {
port: 4200
},
devServer: {
contentBase: './src',
port: 7700,
},
module: {
rules: [
{test: /\.css$/, use: [{loader: MiniCssExtractPlugin.loader,options: {hrm: true,reloadAll: true,},},'css-loader']},
{test: /\.s[ac]ss$/, use: [{loader: MiniCssExtractPlugin.loader,options: {hrm: true,reloadAll: true,publicPath: '../',},},
'css-loader','sass-loader', 'resolve-url-loader']},
{test: /\.(png|jpe?g|gif|svg)$/,loader: 'file-loader',options: {outputPath: 'assets/images',name: '[name].[ext]',},},
{test: /\.(ttf|woff|woff2|eot|)$/,loader: 'file-loader',options: {outputPath: 'assets/fonts',name: '[name].[ext]',},},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css',
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
"moment": "moment"
}),
new HTMLWebpackPlugin({
filename: 'index.html',
template: './index.html',
}),
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [{
from: path.resolve(__dirname, './src/assets/ico/favicon.ico'),
to: path.resolve(__dirname, 'dist/assets/ico/favicon.ico')
}]
}),
new CopyWebpackPlugin({
patterns: [{
from: path.resolve(__dirname, './src/style/scss'),
to: path.resolve(__dirname, 'dist/scss/')
}]
}),
new CopyWebpackPlugin({
patterns: [{
from: path.resolve(__dirname, './src/assets/images'),
to: path.resolve(__dirname, 'dist/assets/images')
}]
}),
],
}