Webpack添加owl.carousel

时间:2017-04-10 22:27:08

标签: javascript node.js webpack gulp gruntjs

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';

我使用了命令:webpack --env = prod --config = webpack.config.js

运行命令后,我在浏览器中打开页面/app/index.html 但页面上的错误:

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

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

0 个答案:

没有答案