Webpack add owl.carousel

611
April 11, 2017, at 2:45 PM

webpack.config.js:

const path = require('path');
const glob = require('glob');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
const CleanWebpackPlugin = require('clean-webpack-plugin');
const PurifyCSSPlugin = require('purifycss-webpack');
module.exports = function (env) {
  return {
    devServer: {
      inline: true
    },
    resolve: {
      extensions: ['.html', '.css', '.js', '.json'],
      modules: ['node_modules'],
    },
    devtool: 'source-map',
    context: __dirname,
    entry: {
      landing: [
        './js/landing.js'
      ]
    },
    output: {
      path: path.resolve(__dirname, './app/'),
      filename: '[name].js',
      chunkFilename: '[id].js',
      pathinfo: true,
      sourceMapFilename: '[file].map'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['es2015'],
              plugins: ['transform-runtime']
            }
          }
        },
        {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader']
          })
        },
        {
          test: /\.html$/,
          use: 'html-loader'
        },
        {
          test: /\.(eot|woff|ttf|svg|png|jpg)$/,
          use: 'url-loader?limit=50000&name=assets/[name]-[hash].[ext]'
        }
      ]
    },
    plugins: [
      new CleanWebpackPlugin(['app']),
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        _: 'lodash',
        jPlayer: 'jplayer'
      }),
      new ExtractTextPlugin({
        filename: (getPath) => {
          return getPath('css/[name].css');
        },
        allChunks: true
      }),
      new HtmlWebpackPlugin({
        filename: 'index.html',
        chunks: ['landing', 'bundle'],
        favicon: './img/favicon.png',
        template: './pages/index.html',
        inject: true
      }),
      new HtmlWebpackPlugin({
        filename: 'terms.html',
        chunks: ['terms', 'bundle'],
        favicon: './img/favicon.png',
        template: './pages/terms.html',
        inject: true
      }),
      new CommonsChunkPlugin('bundle')
    ]
  };
};

landing.js:

import $ from '../node_modules/jquery';
window.$ = $;
window.jQuery = $;
jQuery = $;
import '../node_modules/owl.carousel';

I used the command: webpack --env=prod --config=webpack.config.js

After running the command I open the page /app/index.html in the browser But the error on the page:

Uncaught TypeError: Cannot read property 'fn' of undefined
    at owl.carousel.js:1658

1658: $.fn.owlCarousel = function(option) {

READ ALSO
aws-sdk-mock not mocking putRecord on firehose

aws-sdk-mock not mocking putRecord on firehose

I am trying to mock putRecord method on AWS Firehose object but mocking is not succeedingThe code ends up calling the aws-sdk api on firehose object which talks with live aws service

269
read ECONNRESET error in nodejs

read ECONNRESET error in nodejs

I extracted this piece of code from nodejs documentation Link, but when i run using my nodejs server It gave me this errorSome people in stack overflow had the same error, but I didn't find solution

444
Nodejs Google cloud storage returns 403 when accessing public url

Nodejs Google cloud storage returns 403 when accessing public url

I'm uploading a profile image to google cloud store (which works fine) and trying to make all of the images publicly available, however I keep getting a 403 error from the returned url when used inside of img src or just pasting it in the browser, the returned...

351
Why does click event handler fire immediately upon page load?

Why does click event handler fire immediately upon page load?

I playing around with a function that I want to bind to all the linksAt the present the function fires when the page loads, instead of when I click on the link

166