webpack сделать импортируемый пакет доступным вне функции webpack (сделать глобальным)
Помогите пожалуйста разобраться с webpack. Пробую через ProvidePlugin сделать глобальным объект Ckeditor (переменная ClassicEditor), чтобы можно было из TWIG шаблона к нему обратиться и создать там где нужно. Но bundled файл /web/dist/admin.js не содержит подключения пакета ClassicEditor и в консоли появляется ошибка Uncaught ReferenceError: ClassicEditor is not defined
Вот такие файлы используются, в названии файла указан путь в проекте:
.babelrc - https://pastebin.com/ZCd0zPFa
{
"presets": [
[
"env",
{
"modules": false,
"targets": {
"browsers": [
"> 1%",
"last 50 versions",
"ie >= 8"
]
},
"debug": true
}
],
"stage-2"
],
"plugins": [
"transform-runtime",
"transform-object-rest-spread",
"syntax-object-rest-spread",
"transform-es2015-spread",
"syntax-dynamic-import",
"transform-vue-jsx"
]
}
.package.json - https://pastebin.com/iBRd3uhe
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "NODE_ENV=development cross-env node_modules/webpack/bin/webpack.js --progress --config=./webpack.config.js",
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.5",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-spread": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"babel-preset-stage-3": "^6.24.1",
"babel-register": "^6.22.0",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"friendly-errors-webpack-plugin": "^1.6.1",
"file-loader": "^1.1.4",
"inject-loader": "^3.0.0",
"laravel-mix": "^2.1.14",
"node": "11.15.0",
"html-webpack-plugin": "^2.30.1",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.1.6",
"postcss-url": "^7.2.1",
"pug": "^2.0.4",
"pug-plain-loader": "^1.1.0",
"sass-loader": "^7.1.0",
"sass-resources-loader": "^1.3.5",
"url-loader": "^0.5.8",
"vue-loader": "^15.9.7",
"vue-loader-plugin": "^1.3.0",
"vue-style-loader": "^4.1.3",
"vue-svg-loader": "^0.11.0",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.37.0",
"webpack-cli": "^4.7.0"
},
"dependencies": {
"@ckeditor/ckeditor5-build-classic": "^27.1.0",
"@ckeditor/ckeditor5-upload": "^27.1.0",
"@obvious-msk/p-autosize": "^0.18.5",
"@obvious-msk/p-autosize-input": "^0.18.5",
"@obvious-msk/prianik-ui": "^0.7.16",
"axios": "^0.18.0",
"babel-plugin-syntax-object-rest-spread": "^6.13.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.22.0",
"bootstrap": "^4.1.1",
"cross-env": "^5.2.0",
"date-fns": "^1.30.1",
"downloadjs": "^1.4.7",
"exports-loader": "^2.0.0",
"html2pdf.js": "^0.9.0",
"imports-loader": "^2.0.0",
"jquery": "^3.3.1",
"js-cookie": "^2.2.0",
"laravel-mix-sass-resources-loader": "^1.0.2",
"latinize": "^0.4.0",
"lodash": "^4.17.15",
"node": "11.15.0",
"numeral": "^2.0.6",
"qs": "^6.6.0",
"slick": "^1.12.2",
"vue": "^2.5.21",
"vue-axios": "^2.1.4",
"vue-click-outside": "^1.0.7",
"vue-cookie": "^1.1.4",
"vue-router": "^3.0.2",
"vue-scrollto": "^2.15.0",
"vue-slick": "^1.1.15",
"vue-svg-loader": "^0.11.0",
"vuejs-datepicker": "^1.5.2",
"vuex": "^3.0.1",
"webpack-bundle-analyzer": "^2.13.1"
}
}
webpack.config.js - https://pastebin.com/0E0QfcR8
const webpack = require('webpack');
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
"context": path.resolve(__dirname, './'),
"entry": {
"app": [
"./vue_src/project/main.js",
"./vue_src/project/css/styles.sass",
"./vue_src/project/Legacy/legacy.sass",
"./vue_src/project/Admin/admin.sass"
],
"legacy": [
"./vue_src/project/Legacy/index.js"
],
"admin": "./vue_src/project/Admin/index.js",
"vendor": [
"vue",
"jquery",
"vue-slick",
"axios",
"vue-axios",
"vue-hotel-datepicker",
"date-fns"
]
},
output: {
path: path.resolve(__dirname, './web/dist/'),
filename: "[name].js",
chunkFilename: "[name].js",
publicPath: "/",
},
module: {
rules: [
{
test: /\.vue$/,
use: [
'vue-loader',
'pug-plain-loader'
]
},
{
test: /\.js$/,
use: [
'babel-loader',
'vue-loader',
'vue-style-loader',
'css-loader',
],
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /\.sass$/,
use: [
'css-loader',
'sass-loader',
]
},
{
test: /\.pug$/,
loader: 'pug-plain-loader'
}
]
},
plugins: [
new VueLoaderPlugin(),
new webpack.ProvidePlugin({
ClassicEditor: require.resolve("@ckeditor/ckeditor5-build-classic")
})
],
resolve: {
extensions: [
"*",
".js",
".jsx",
".vue"
],
},
};
/vue_src/project/Admin/index.js - https://pastebin.com/WihSwK0E
/* global BoostrapDialog */
import axios from 'axios'
import qs from 'qs'
// закоментировал, чтобы проверить webpack.ProvidePlugin
//import { ClassicEditor } from '@ckeditor/ckeditor5-build-classic'
//import { default as SimpleUploadAdapter } from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter'
ClassicEditor.create('#editor');
// остальной код
/src/template/editor.html.twig - https://pastebin.com/x0LwdARR
<!-- TWIG шаблон -->
<div class="item form-group">
<script type="text/javascript">
$(document).ready(function(){
ClassicEditor.create('#editor');
</script>
</div>
/web/dist/admin.js https://pastebin.com/YWWB7vLe
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
/******/
(() => { // webpackBootstrap
/******/
"use strict";
/******/
var __webpack_modules__ = ({
/***/ "./vue_src/project/Admin/index.js":
/*!*******************************************!*\
!*** ./vue_src/project/Admin/index.js ***!
\*******************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ \"./node_modules/vue-loader/lib/runtime/componentNormalizer.js\");\nvar render, staticRenderFns;\nvar script = {};\n\n/* normalize component */\n\nvar component = (0,/**/_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_0__.default)(script, render, staticRenderFns, false, null, null, null);\n\ncomponent.options.__file = \"vue_src/project/Admin/index.js\";\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (component.exports);\n\n//# sourceURL=webpack://project-vue/./vue_src/project/Admin/index.js?");
/***/
}),
/***/ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js":
/*!********************************************************************!*\
!*** ./node_modules/vue-loader/lib/runtime/componentNormalizer.js ***!
\********************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ normalizeComponent)\n/* harmony export */ });\n/* globals __VUE_SSR_CONTEXT__ */\n\n// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).\n// This module is a runtime utility for cleaner component module output and will\n// be included in the final webpack user bundle.\n\nfunction normalizeComponent (\n scriptExports,\n render,\n staticRenderFns,\n functionalTemplate,\n injectStyles,\n scopeId,\n moduleIdentifier, /* server only */\n shadowMode /* vue-cli only */\n) {\n // Vue.extend constructor export interop\n var options = typeof scriptExports === 'function'\n ? scriptExports.options\n : scriptExports\n\n // render functions\n if (render) {\n options.render = render\n options.staticRenderFns = staticRenderFns\n options._compiled = true\n }\n\n // functional template\n if (functionalTemplate) {\n options.functional = true\n }\n\n // scopedId\n if (scopeId) {\n options._scopeId = 'data-v-' + scopeId\n }\n\n var hook\n if (moduleIdentifier) { // server build\n hook = function (context) {\n // 2.3 injection\n context =\n context || // cached call\n (this.$vnode && this.$vnode.ssrContext) || // stateful\n (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional\n // 2.2 with runInNewContext: true\n if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\n context = __VUE_SSR_CONTEXT__\n }\n // inject component styles\n if (injectStyles) {\n injectStyles.call(this, context)\n }\n // register component module identifier for async chunk inferrence\n if (context && context._registeredComponents) {\n context._registeredComponents.add(moduleIdentifier)\n }\n }\n // used by ssr in case component is cached and beforeCreate\n // never gets called\n options._ssrRegister = hook\n } else if (injectStyles) {\n hook = shadowMode\n ? function () {\n injectStyles.call(\n this,\n (options.functional ? this.parent : this).$root.$options.shadowRoot\n )\n }\n : injectStyles\n }\n\n if (hook) {\n if (options.functional) {\n // for template-only hot-reload because in that case the render fn doesn't\n // go through the normalizer\n options._injectStyles = hook\n // register for functional component in vue file\n var originalRender = options.render\n options.render = function renderWithStyleInjection (h, context) {\n hook.call(context)\n return originalRender(h, context)\n }\n } else {\n // inject component registration as beforeCreate hook\n var existing = options.beforeCreate\n options.beforeCreate = existing\n ? [].concat(existing, hook)\n : [hook]\n }\n }\n\n return {\n exports: scriptExports,\n options: options\n }\n}\n\n\n//# sourceURL=webpack://project-vue/./node_modules/vue-loader/lib/runtime/componentNormalizer.js?");
/***/
})
/******/
});
/************************************************************************/
/******/ // The module cache
/******/
var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/
function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/
var cachedModule = __webpack_module_cache__[moduleId];
/******/
if (cachedModule !== undefined) {
/******/
return cachedModule.exports;
/******/
}
/******/ // Create a new module (and put it into the cache)
/******/
var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/
};
/******/
/******/ // Execute the module function
/******/
__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/
return module.exports;
/******/
}
/******/
/************************************************************************/
/******/ /* webpack/runtime/define property getters */
/******/
(() => {
/******/ // define getter functions for harmony exports
/******/
__webpack_require__.d = (exports, definition) => {
/******/
for (var key in definition) {
/******/
if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/
Object.defineProperty(exports, key, {enumerable: true, get: definition[key]});
/******/
}
/******/
}
/******/
};
/******/
})();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/
(() => {
/******/
__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/
})();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/
(() => {
/******/ // define __esModule on exports
/******/
__webpack_require__.r = (exports) => {
/******/
if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/
Object.defineProperty(exports, Symbol.toStringTag, {value: 'Module'});
/******/
}
/******/
Object.defineProperty(exports, '__esModule', {value: true});
/******/
};
/******/
})();
/******/
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval devtool is used.
/******/
var __webpack_exports__ = __webpack_require__("./vue_src/project/Admin/index.js");
/******/
/******/
})()
;