title: Webpack add owl.carousel
body: <p><strong>webpack.config.js:</strong></p>
  
  <pre><code>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&amp;name=assets/[name]-[hash].[ext]'
          }
        ]
      },
      plugins: [
        new CleanWebpackPlugin(['app']),
        new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery',
          _: 'lodash',
          jPlayer: 'jplayer'
        }),
        new ExtractTextPlugin({
          filename: (getPath) =&gt; {
            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')
      ]
    };
  };
  </code></pre>
  
  <p><strong>landing.js:</strong></p>
  
  <pre><code>import $ from '../node_modules/jquery';
  window.$ = $;
  window.jQuery = $;
  jQuery = $;
  
  import '../node_modules/owl.carousel';
  </code></pre>
  
  <p>I used the command: webpack --env=prod --config=webpack.config.js</p>
  
  <p>After running the command I open the page /app/index.html in the browser
  But the error on the page:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'fn' of undefined
      at owl.carousel.js:1658
  </code></pre>
  
  <p>1658: $.fn.owlCarousel = function(option) {</p>