Monday 10 April 2017

Webpack add owl.carousel

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) {



via user5671335

No comments:

Post a Comment