",
17 | "license": "MIT",
18 | "keywords": [
19 | "clappr",
20 | "ima",
21 | "plugin",
22 | "ad",
23 | "googleads"
24 | ],
25 | "repository": "kslimani/clappr-ima-plugin",
26 | "devDependencies": {
27 | "@babel/core": "^7.26.9",
28 | "@babel/preset-env": "^7.26.9",
29 | "@eslint/eslintrc": "^3.3.0",
30 | "@eslint/js": "^9.22.0",
31 | "babel-loader": "^10.0.0",
32 | "command-runner": "^0.2.2",
33 | "core-js": "^3.41.0",
34 | "css-loader": "^7.1.2",
35 | "cypress": "^14.1.0",
36 | "eslint": "^9.22.0",
37 | "eslint-plugin-cypress": "^4.2.0",
38 | "globals": "^16.0.0",
39 | "ima-ad-player": "^0.5.7",
40 | "node-sass": "^9.0.0",
41 | "postcss-sass": "^0.5.0",
42 | "sass-loader": "^16.0.5",
43 | "stylelint": "^16.15.0",
44 | "stylelint-config-recommended": "^15.0.0",
45 | "terser-webpack-plugin": "^5.3.14",
46 | "webpack": "^5.98.0",
47 | "webpack-build-notifier": "^3.1.0",
48 | "webpack-cli": "^6.0.1",
49 | "webpack-dev-server": "^5.2.0"
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
188 |
189 |
190 |
--------------------------------------------------------------------------------
/public/tests/vmap_spec.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
15 |
16 |
17 |
18 |
82 |
83 |
84 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import {UICorePlugin, Events, Browser, Styler, Utils, $} from 'clappr'
2 | import ImaAdPlayer from 'ima-ad-player'
3 | import pluginStyle from './style.sass'
4 |
5 | const svgPixel = 'data:image/svg+xml, '
6 |
7 | /* global google */
8 | export default class ClapprImaPlugin extends UICorePlugin {
9 | get name() {
10 | return 'ima-plugin'
11 | }
12 |
13 | get supportedVersion() {
14 | return {
15 | min: '0.4.0',
16 | max: '1.0.0'
17 | }
18 | }
19 |
20 | get attributes() {
21 | return {
22 | 'class': this.name,
23 | 'data-ima': ''
24 | }
25 | }
26 |
27 | static get vpaidMode() {
28 | return ImaAdPlayer.vpaidMode
29 | }
30 |
31 | constructor(core) {
32 | super(core)
33 |
34 | // Store autoplay value
35 | this._coreAutoplay = this.core.options.autoPlay
36 |
37 | // Disable autoplay if VAST tag is set to prevents content playback
38 | this._hasTag && (this.core._options.autoPlay = false)
39 | }
40 |
41 | bindEvents() {
42 | if (Events.CORE_ACTIVE_CONTAINER_CHANGED) {
43 | this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this._onContainerChanged)
44 | } else {
45 | this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this._onContainerChanged)
46 | }
47 |
48 | this.listenTo(this.core, Events.CORE_READY, this._onCoreReady)
49 | this.listenTo(this.core, Events.CORE_RESIZE, this._onResize)
50 | }
51 |
52 | get __config() {
53 | return this.options.imaPlugin || {}
54 | }
55 |
56 | get __container() {
57 | return this.core.activeContainer
58 | ? this.core.activeContainer
59 | : this.core.mediaControl.container
60 | }
61 |
62 | get __playback() {
63 | return this.core.activePlayback
64 | ? this.core.activePlayback
65 | : this.core.getCurrentPlayback()
66 | }
67 |
68 | get _hasTag() {
69 | return !!(this.__config.imaAdPlayer && this.__config.imaAdPlayer.tag)
70 | }
71 |
72 | get _playbackIsMedia() {
73 | return this.__playback.tagName === 'video'
74 | || this.__playback.tagName === 'audio'
75 | }
76 |
77 | get _playbackIsNativeVideo() {
78 | return this.__playback.name === 'html5_video'
79 | }
80 |
81 | get _sourceIsRestored() {
82 | // Video source is checked only if "native" video playback,
83 | // otherwise it assume that custom playback is not used by IMA SDK
84 | // See also https://github.com/kslimani/clappr-ima-plugin/issues/5
85 | return (this._playbackIsNativeVideo && ! this._isNonLinear)
86 | ? this._src === this.__playback.el.src
87 | : true
88 | }
89 |
90 | get _playbackCurrentTime() {
91 | return this.__playback.getCurrentTime
92 | ? this.__playback.getCurrentTime()
93 | : this.__playback.el.currentTime // Assume video element
94 | }
95 |
96 | get _isIOS10Plus() {
97 | return Browser.isiOS && Browser.os.majorVersion >= 10
98 | }
99 |
100 | get _isIOS10PlusWithAdError() {
101 | return this._hasAdError && this._isIOS10Plus
102 | }
103 |
104 | _onContainerChanged() {
105 | if (this._adPlayer) {
106 | // Assumes player has loaded another source
107 | this.$el.hide()
108 | this._adPlayer.destroy()
109 |
110 | // If autoplay is true on mobile device then player
111 | // must be consented and recycle video must be enabled
112 | this._coreAutoplay = this.core.options.autoPlay
113 | }
114 |
115 | // Reset ad scenario
116 | this._resetAd()
117 |
118 | this._isEnded = false
119 |
120 | this.listenTo(this.__playback, Events.PLAYBACK_PLAY_INTENT, () => {
121 | if (this._isPlayingAd) return
122 |
123 | // Assumes that "PLAYBACK_PLAY_INTENT" event is from user interaction
124 | if (this._adPlayer && this._isFirstPlay) {
125 | this._adPlayer.initAdDisplayContainer()
126 | this._disableUI()
127 | }
128 | })
129 |
130 | this.listenTo(this.__playback, Events.PLAYBACK_PLAY, () => {
131 | if (this._isPlayingAd) return
132 |
133 | // Playback source may have changed
134 | if (this._src !== this.__playback.el.src) {
135 | this._src = this.__playback.el.src
136 | }
137 |
138 | // FIXME: add a mechanism in Clappr to prevents playback to play on "PLAYBACK_PLAY_INTENT" event
139 | // FIXME: Alternatively, remove "dummy" source feature and autostart playback, with the risk to degrade user experience ?
140 | if (this._adPlayer && this._isFirstPlay) {
141 | this._isFirstPlay = false
142 | this._isEnded = false
143 | this._src = this.__playback.el.src
144 | this.__playback.pause()
145 | this._adPlayer.play()
146 | }
147 | })
148 |
149 | this.listenTo(this.__playback, Events.PLAYBACK_ENDED, () => {
150 | if (this._isPlayingAd || this._mayAutoStartMutedAdPlayer) return
151 |
152 | if (this._adPlayer && ! this._isEnded) {
153 | this._isEnded = true
154 |
155 | // Signal ad player that playback completed
156 | this._adPlayer && this._adPlayer.ended()
157 |
158 | this.__config.resetAdOnEnded && this._resetAd()
159 | }
160 | })
161 |
162 | this.listenTo(this.__container, Events.CONTAINER_VOLUME, (v) => {
163 | this._adPlayer && this._adPlayer.setVolume(v/100)
164 | })
165 |
166 | this.__container.$el.append(this.el)
167 | }
168 |
169 | _onCoreReady() {
170 | // Since Clappr 0.2.84, "CORE_READY" event is trigerred after container changed
171 | this._initPlugin()
172 |
173 | // Restore autoplay (if previously enabled)
174 | this._coreAutoplay && (this.core._options.autoPlay = true)
175 | }
176 |
177 | _onResize(evt) {
178 | if (evt.width && evt.width > 0) {
179 | this._adPlayer && this._adPlayer.resize(evt.width, evt.height)
180 | }
181 | }
182 |
183 | _resetAd() {
184 | this._isFirstPlay = true
185 | this._isNonLinear = false
186 | }
187 |
188 | _initPlugin() {
189 | // Build ad player configuration
190 | let config = this.__config.imaAdPlayer || {tag: false}
191 | config.video = this.__playback.el
192 | config.displayContainer = this._adContainer
193 |
194 | if (! this._playbackIsMedia && Browser.isMobile) {
195 | // Mobile device require an HTML5 video element
196 | config.tag = false
197 | } else if (this.__playback.name === 'no_op') {
198 | // Avoid to display an ad if player cannot play content
199 | config.tag = false
200 | }
201 |
202 | // Prevents ad player creation if no VAST tag
203 | if (! config.tag) {
204 | this._adPlayer = null
205 |
206 | return
207 | }
208 |
209 | // Attempt to get "error screen" core plugin
210 | this._errorScreenPlugin = this.core.getPlugin('error_screen')
211 |
212 | // Attempt to get "poster" container plugin
213 | this._posterPlugin = this.__container.getPlugin('poster')
214 |
215 | // Attempt to get "click to pause" container plugin
216 | this._clickToPausePlugin = this.__container.getPlugin('click_to_pause')
217 |
218 | // Hide video source preview using a black 1 pixel video poster for smoother user experience (iOS/MacOSX)
219 | if (this._playbackIsMedia && ! this.__playback.el.hasAttribute('poster')) {
220 | this.__playback.el.poster = svgPixel
221 | }
222 |
223 | // Create ad player
224 | ImaAdPlayer(config, (player, error) => {
225 | // Resume content if ad player creation failed
226 | if (error) {
227 | this._mayAutoStartMutedAdPlayer = false
228 |
229 | return this._resumeContent()
230 | }
231 |
232 | // Disable custom playback by default for iOS 10+ to handle skippable ads
233 | // Plugin will take care of video content source
234 | this.__config.enableCustomPlaybackForIOS10Plus || google.ima.settings.setDisableCustomPlaybackForIOS10Plus(true)
235 |
236 | player.on('ad_begin', () => {
237 | this.$el.show()
238 | this._isPlayingAd = true
239 | this._hasAdError = false
240 | this._pauseContent()
241 | })
242 |
243 | player.on('ad_error', () => {
244 | this._hasAdError = true
245 | })
246 |
247 | player.on('ad_non_linear', () => {
248 | this._isNonLinear = true
249 | })
250 |
251 | player.on('ad_end', () => {
252 | if (this._isNonLinear) {
253 | if (this.__config.disableNonLinear || (this.__config.disableNonLinearForIOS && Browser.isiOS)) {
254 | // Non-linear conflicts with "click_to_play" plugin on iOS devices,
255 | // therefore it is skipped if disableNonLinearForIOS is set
256 | this._isPlayingAd = false
257 | this.$el.hide()
258 | this._adPlayer && this._adPlayer.stop()
259 | } else {
260 | this._isPlayingAd = true
261 | this.$el.show()
262 | }
263 | } else {
264 | this._isPlayingAd = false
265 | this.$el.hide()
266 | }
267 |
268 | this._mayAutoStartMutedAdPlayer = false
269 |
270 | // Avoid video to starts over after a post-roll
271 | if (this._isEnded) {
272 | this._restoreSourceIfMissing(() => {
273 | this._enableUI(false)
274 | })
275 | } else {
276 | this._restoreSourceIfMissing(() => {
277 | this._resumeContent()
278 | })
279 | }
280 | })
281 |
282 | this._adPlayer = player
283 |
284 | if (typeof this.__config.onAdPlayerReady === 'function') {
285 | this.__config.onAdPlayerReady(this._adPlayer)
286 | }
287 |
288 | // Check if autoplay was enabled
289 | if (this._coreAutoplay) {
290 | // Attempt to autoplay ad player
291 | this.__playback.canAutoPlay((result) => {
292 | if (result) {
293 | this._isFirstPlay = false
294 | this._isEnded = false
295 | this._setDummySourceIfMissing(() => {
296 | this._mayAutoStartMutedAdPlayer = true
297 | this._adPlayer.play()
298 | })
299 | } else {
300 | this._mayRequestAdIfNoAutoplay()
301 | }
302 | })
303 | } else {
304 | this._mayRequestAdIfNoAutoplay()
305 | }
306 | })
307 | }
308 |
309 | _mayRequestAdIfNoAutoplay() {
310 | this.__config.requestAdIfNoAutoplay && this._adPlayer.request()
311 | }
312 |
313 | _setDummySourceIfMissing(next) {
314 | if (this._playbackIsMedia) {
315 | let src = this.__playback.el && this.__playback.el.src
316 |
317 | // Video source may not be set yet by playback
318 | if (!src || src.length === 0) {
319 | this.__playback.el.src = Utils.Media.mp4
320 | } else {
321 | this._src = src
322 | }
323 | }
324 |
325 | next && next()
326 | }
327 |
328 | _restoreSourceIfMissing(next) {
329 | if (this._sourceIsRestored && ! this._isIOS10PlusWithAdError) {
330 | next && next()
331 | } else {
332 | // Source may not be restored on iOS 10 plus if IMA custom playback is disabled
333 | this._setSource(this._src, () => {
334 | // Check for seek after mid-roll
335 | if (this._pauseTime > 1 && ! this._isEnded) {
336 | this._seek(this._pauseTime, next)
337 | } else {
338 | next && next()
339 | }
340 | })
341 | }
342 | }
343 |
344 | _setSource(src, next) {
345 | let eh = () => {
346 | this.__playback.el.removeEventListener('loadedmetadata', eh, false)
347 | this.__playback.el.removeEventListener('error', eh, false)
348 | next && next()
349 | }
350 |
351 | this.__playback.el.addEventListener('loadedmetadata', eh, false)
352 | this.__playback.el.addEventListener('error', eh, false)
353 | this.__playback.el.src = src
354 | this.__playback.el.load()
355 | }
356 |
357 | _seek(seekTime, next) {
358 | if (this._playbackIsMedia && ! this.__playback.el.seekable.length) {
359 | return setTimeout(() => {
360 | this._seek(seekTime, next)
361 | }, 100)
362 | }
363 |
364 | // Assume playback implements seek method
365 | this.__playback.seek && this.__playback.seek(seekTime)
366 | next && next()
367 | }
368 |
369 | _disableUI() {
370 | if (this.core.disableMediaControl) {
371 | this.core.disableMediaControl()
372 | } else {
373 | let mediaControl = this.core.getPlugin('media_control')
374 | mediaControl && mediaControl.disable()
375 | }
376 |
377 | this._posterPlugin && this._posterPlugin.disable()
378 | this._clickToPausePlugin && this._clickToPausePlugin.disable()
379 | this._errorScreenPlugin && this._errorScreenPlugin.disable()
380 | this._uiEnabled = false
381 | }
382 |
383 | _enableUI(enableMediaControl = true) {
384 | if (this._uiEnabled) {
385 | return
386 | }
387 |
388 | this._errorScreenPlugin && this._errorScreenPlugin.enable()
389 | this._clickToPausePlugin && this._clickToPausePlugin.enable()
390 | this._posterPlugin && this._posterPlugin.enable()
391 |
392 | if (enableMediaControl) {
393 | if (this.core.enableMediaControl) {
394 | this.core.enableMediaControl()
395 | } else {
396 | let mediaControl = this.core.getPlugin('media_control')
397 | mediaControl && mediaControl.enable()
398 | }
399 | }
400 |
401 | this._uiEnabled = true
402 | }
403 |
404 | _pauseContent() {
405 | this._pauseTime = this._playbackCurrentTime
406 | this.__playback.pause()
407 | this._disableUI()
408 | }
409 |
410 | _resumeContent() {
411 | this._enableUI()
412 | this.__playback.play()
413 | }
414 |
415 | render() {
416 | this._$adContainer = $("")
417 | .addClass("ima-ad-container")
418 | .attr('data-ima', '')
419 |
420 | this.$el.append(this._$adContainer)
421 | this.$el.append(Styler.getStyleFor(pluginStyle))
422 | this._adContainer = this._$adContainer[0]
423 | this.$el.hide()
424 |
425 | return this
426 | }
427 |
428 | destroy() {
429 | this._adPlayer && this._adPlayer.destroy()
430 | super.destroy()
431 | }
432 | }
433 |
--------------------------------------------------------------------------------
/src/style.sass:
--------------------------------------------------------------------------------
1 | .ima-plugin[data-ima]
2 | position: absolute
3 | top: 0
4 | left: 0
5 | width: 100%
6 | height: 100%
7 | text-align: left
8 | z-index: 10000 /* media-control z-index is 9999 */
9 | .ima-ad-container[data-ima]
10 | position: absolute
11 | top: 0
12 | left: 0
13 | width: 100%
14 | height: 100%
15 |
--------------------------------------------------------------------------------
/tests/functional/vmap_spec.js:
--------------------------------------------------------------------------------
1 | import EventDomStorage from '../support/event-dom-storage'
2 |
3 | describe('VAST VMAP ads scenario', () => {
4 | it('display preroll, midroll and postroll', () => {
5 |
6 | cy.visit('/tests/vmap_spec.html', {
7 | onBeforeLoad(win) { EventDomStorage.make(win) }
8 | })
9 |
10 | cy.window().then((win) => {
11 | expect(win.Clappr).to.be.an('object')
12 | expect(win.ClapprImaPlugin).to.be.a('function')
13 | expect(win.google.ima).to.be.an('object')
14 | })
15 |
16 | cy.get('.player-poster[data-poster]').should('not.be.visible')
17 |
18 | // PREROLL
19 | cy.expectEvent(1, 'ad_begin')
20 | cy.get('.ima-plugin[data-ima]').should('be.visible')
21 | cy.expectEvent(2, 'impression', 'ad_begin')
22 | cy.expectEvent(3, 'started', 'impression')
23 | cy.expectEvent(4, 'first_quartile', 'started')
24 | cy.expectEvent(5, 'midpoint', 'first_quartile')
25 | cy.expectEvent(6, 'third_quartile', 'midpoint')
26 | cy.expectEvent(7, 'complete', 'third_quartile')
27 | cy.expectEvent(8, 'ad_end', 'complete')
28 | cy.get('.ima-plugin[data-ima]').should('not.be.visible')
29 | cy.expectEvent(9, 'player_play', 'ad_end')
30 |
31 | // Midroll is scheduled at 15 seconds
32 | cy.wait(15000)
33 |
34 | // MIDROLL
35 | cy.expectEvent(10, 'ad_begin', 'player_play')
36 | cy.get('.ima-plugin[data-ima]').should('be.visible')
37 | cy.expectEvent(11, 'impression', 'ad_begin')
38 | cy.expectEvent(12, 'started', 'impression')
39 | cy.expectEvent(13, 'first_quartile', 'started')
40 | cy.expectEvent(14, 'midpoint', 'first_quartile')
41 | cy.expectEvent(15, 'third_quartile', 'midpoint')
42 | cy.expectEvent(16, 'complete', 'third_quartile')
43 | cy.expectEvent(17, 'ad_end', 'complete')
44 | cy.get('.ima-plugin[data-ima]').should('not.be.visible')
45 | cy.expectEvent(18, 'player_play', 'ad_end')
46 |
47 | // Video length is 33 seconds
48 | cy.wait(16000)
49 |
50 | // POSTROLL
51 | cy.expectEvent(19, 'player_ended', 'player_play')
52 | cy.expectEvent(20, 'ad_begin', 'player_ended')
53 | cy.get('.ima-plugin[data-ima]').should('be.visible')
54 | cy.expectEvent(21, 'impression', 'ad_begin')
55 | cy.expectEvent(22, 'started', 'impression')
56 | cy.expectEvent(23, 'first_quartile', 'started')
57 | cy.expectEvent(24, 'midpoint', 'first_quartile')
58 | cy.expectEvent(25, 'third_quartile', 'midpoint')
59 | cy.expectEvent(26, 'complete', 'third_quartile')
60 | cy.expectEvent(27, 'ad_end', 'complete')
61 | cy.get('.ima-plugin[data-ima]').should('not.be.visible')
62 |
63 | cy.get('.player-poster[data-poster]').should('be.visible')
64 |
65 | })
66 | })
67 |
--------------------------------------------------------------------------------
/tests/support/event-dom-storage.js:
--------------------------------------------------------------------------------
1 | /**
2 | * EventDomStorage helper class. See also "cy.expectEvent" test command.
3 | */
4 | export default class EventDomStorage {
5 |
6 | constructor(win, fn = 'spyEvent') {
7 | this.$el = null
8 | this.fn = fn
9 | this.win = win
10 | this.win[this.fn] = this.store.bind(this)
11 | }
12 |
13 | static make(win, fn) {
14 | return new EventDomStorage(win, fn)
15 | }
16 |
17 | _mount() {
18 | // Ensure document.body is available
19 | if (!this.win || !this.win.document || !this.win.document.body) {
20 | throw 'EventDomStorage: document.body unavailable'
21 | }
22 |
23 | // Create hidden container element
24 | this.$el = Cypress.$('')
25 | .attr('data-cy', this.fn)
26 | .hide()
27 |
28 | // Append to document body
29 | Cypress.$(this.win.document.body)
30 | .append(this.$el)
31 | }
32 |
33 | store(event) {
34 | if (this.$el === null) {
35 | this._mount()
36 | }
37 |
38 | // Calculate order from previous stored event
39 | let $prev = this.$el.find('li').last()
40 | let order = $prev.length > 0 ? parseInt($prev.attr('data-order')) + 1 : 1
41 | let prev = $prev.attr('data-event')
42 |
43 | // Prevents duplicated event
44 | if (event === prev) return
45 |
46 | // Append event to container
47 | this.$el.append(
48 | Cypress.$('')
49 | .attr('data-event', event)
50 | .attr('data-order', order)
51 | .attr('data-prev', prev)
52 | )
53 |
54 | console.log(`[${order}] ${event}`)
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/tests/support/index.js:
--------------------------------------------------------------------------------
1 | // Cypress.io support file
2 |
3 | /**
4 | * Disable screenshot on failure
5 | */
6 | Cypress.Screenshot.defaults({
7 | screenshotOnRunFailure: false,
8 | })
9 |
10 | /**
11 | * Add "cy.expectEvent" test command. See also EventDomStorage class.
12 | *
13 | * @example cy.expectEvent(2, 'expectedEvent', 'expectedOptionalPreviousEvent')
14 | */
15 | Cypress.Commands.add('expectEvent', (order, event, previousEvent) => {
16 | if (previousEvent) {
17 | cy.log(`[${order}] expect event "${event}" fired after event "${previousEvent}"`)
18 |
19 | cy.get('ul[data-cy="spyEvent"]')
20 | .find(`li[data-event="${event}"][data-order="${order}"]`)
21 | .should('have.attr', 'data-prev', previousEvent)
22 | } else {
23 | cy.log(`[${order}] expect event "${event}" fired first`)
24 |
25 | cy.get('ul[data-cy="spyEvent"]')
26 | .find(`li[data-event="${event}"][data-order="${order}"]`)
27 | .should('not.have.attr', 'data-prev')
28 | }
29 | })
30 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | // Webpack 5 configuration
2 | const path = require('path')
3 | const TerserPlugin = require('terser-webpack-plugin');
4 | const NotifierPlugin = require('webpack-build-notifier')
5 |
6 | var name = 'clappr-ima-plugin'
7 | var outputFile, plugins = [], optimization = {}
8 |
9 | if (process.env.npm_lifecycle_event === 'dist') {
10 | outputFile = name + '.min.js'
11 | optimization.minimizer = [
12 | new TerserPlugin(),
13 | ]
14 | } else {
15 | outputFile = name + '.js'
16 | optimization.minimize = false
17 | }
18 |
19 | plugins.push(new NotifierPlugin({
20 | title: optimization.minimizer ? 'minified ' + name : name,
21 | }))
22 |
23 | module.exports = {
24 | entry: path.resolve(__dirname, 'src/index.js'),
25 | output: {
26 | path: path.resolve(__dirname, 'dist'),
27 | filename: outputFile,
28 | library: {
29 | type: 'umd',
30 | name: 'ClapprImaPlugin',
31 | export: 'default',
32 | },
33 | },
34 | optimization: optimization,
35 | module: {
36 | rules: [
37 | {
38 | test: /\.js$/,
39 | use: {
40 | loader: 'babel-loader'
41 | },
42 | include: [
43 | path.resolve(__dirname, 'src')
44 | ],
45 | },
46 | {
47 | test: /\.sass$/,
48 | use: [
49 | {
50 | loader: 'css-loader',
51 | },
52 | {
53 | loader: 'sass-loader',
54 | },
55 | ],
56 | },
57 | ],
58 | },
59 | plugins: plugins,
60 | externals: {
61 | clappr: {
62 | amd: 'clappr',
63 | commonjs: 'clappr',
64 | commonjs2: 'clappr',
65 | root: 'Clappr'
66 | }
67 | },
68 | devServer: {
69 | static: [
70 | path.resolve(__dirname, "public"),
71 | ],
72 | // firewall: false,
73 | compress: true,
74 | host: '0.0.0.0',
75 | port: 8080
76 | }
77 | }
78 |
--------------------------------------------------------------------------------