Включите стороннюю библиотеку в webpack

Question

Я пытаюсь включить плагин (freezeframe plugin) в мое приложение, используя webpack, но не могу понять, как это сделать. Я обслуживаю этот файл локально из своего приложения, а не из cdn или npm/bower. Я искал все, чтобы попытаться справиться с этим, но не смог приблизиться.

мой файл WebPack выглядит следующим образом:

const webpack = require('webpack'); 
const conf = require('./gulp.conf'); 
const path = require('path'); 

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const autoprefixer = require('autoprefixer'); 

module.exports = { 
    module: { 
    preLoaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'eslint' 
     } 
    ], 

    loaders: [ 
     { 
     test: /.json$/, 
     loaders: [ 
      'json' 
     ] 
     }, 
     { 
     test: /\.gif$/, 
     loader: 'url-loader', 
     query: { mimetype: 'image/gif' } 
     }, 
     { 
     test: /\.svg$/, 
     loader: 'svg-loader?pngScale=2' 
     }, 
     { 
     test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/, 
     loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]' 
     }, 
     { 
     test: /\.(css|scss)$/, 
     loaders: [ 
      'style', 
      'css', 
      'sass', 
      'postcss' 
     ] 
     }, 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loaders: [ 
      'babel', 
     ] 
     }, 
     { 
     test: /.vue$/, 
     loaders: [ 
      'vue' 
     ] 
     } 
    ] 
    }, 
    vue: { 
    postcss: [ 
     require('autoprefixer')({ 
     browsers: [ 
      'Android >= 2.3', 
      'BlackBerry >= 7', 
      'Chrome >= 9', 
      'Firefox >= 4', 
      'Explorer >= 9', 
      'iOS >= 5', 
      'Opera >= 11', 
      'Safari >= 5', 
      'OperaMobile >= 11', 
      'OperaMini >= 6', 
      'ChromeAndroid >= 9', 
      'FirefoxAndroid >= 4', 
      'ExplorerMobile >= 9' 
     ] 
     }), 
    ] 
    }, 
    plugins: [ 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new HtmlWebpackPlugin({ 
     template: conf.path.src('index.html') 
    }), 
    new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jquery: 'jquery', 
     'window.jQuery': 'jquery', 
     jQuery: 'jquery', 
     slick: 'slick-carousel' 
    }) 
    ], 
    resolve: { 
    extensions: ['', '.js', '.css', '.scss'], 
    alias: { 
     'jQuery': path.join(__dirname, 'node_modules', 'jquery', 'dist', 'jquery') 
    } 
    }, 
    postcss:() => [autoprefixer({ 
    browsers: [ 
     'Android >= 2.3', 
     'BlackBerry >= 7', 
     'Chrome >= 9', 
     'Firefox >= 4', 
     'Explorer >= 9', 
     'iOS >= 5', 
     'Opera >= 11', 
     'Safari >= 5', 
     'OperaMobile >= 11', 
     'OperaMini >= 6', 
     'ChromeAndroid >= 9', 
     'FirefoxAndroid >= 4', 
     'ExplorerMobile >= 9' 
    ] 
    })], 
    debug: true, 
    devtool: 'source-map', 
    output: { 
    path: path.join(process.cwd(), conf.paths.tmp), 
    filename: 'index.js' 
    }, 
    entry: `./${conf.path.src('index')}` 
}; 

Я думал, что я пишу require('./assets/freezeframe/freezeframe.js'); в моем вю компоненте, но потом жалуется на JQuery не определено. Я JQuery установить через НПМ и я уже использую другой плагин, который делает использование JQuery, как это:

import 'slick-carousel'; 
    const imagesLoaded = require('imagesloaded'); 

    export default { 
    name: 'Slider', 
    props: ['images', 'component'], 
    mounted() { 
     var that = this; 
     $(function() { 
     imagesLoaded('.js-component-slider',() => { 
      $(that.$el).slick({ 
      adaptiveHeight: true, 
      infinite: false 
      }); 
     }); 
     }); 
    } 
    } 

я сейчас не знаю, что делать. Я не хочу просто включать другой jquery и файл плагина вверху/внизу моего index.html, потому что я хочу, чтобы он был связан вместе.

Единственная другая болезненная вещь - это плагин isnt in npm и im, не использующий беседку.

UPDATE:

Я видел этот вопрос add-js-file, но я пытался сделать это с плагином, но все еще получаю ошибку он не включен, когда я требовать («») nameoffile

Answer 1

поэтому после поиска в течение всего дня я узнал, что должен был подгонять плагин, поскольку он не использует module.export. shim plugin, который означал, что я мог бы написать это: Вы также должны установить exports-loader

const freezeframe = require("exports?freezeframe!./assets/freezeframe/freezeframe.js"); 

в моем файле вю. Затем я смог использовать его, как раньше, добавляя его в index.html