I am trying to include a plugin ( freezeframe plugin ) in my application using webpack but cannot figure out how to do this. I serve this file locally from my application, not from cdn or npm / bower. I was looking for everything to try to do this, but could not get close.
my webpack file is as follows:
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')}` };
It seemed to me that I am writing require('./assets/freezeframe/freezeframe.js'); in my vue component, but then complaints about jquery are not defined. I installed jquery via npm and I am already using another plugin that uses jquery as follows:
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 }); }); }); } }
Now I'm not sure what to do. I don't want to just include another jquery and a plugin file at the top / bottom of my index.html, because I want it to be linked together.
The only other painful thing is the isnt plugin in npm and they don’t use the gazebo.
UPDATE:
I saw this add-js-file question, but I tried to do this with the plugin, but still get an error that doesn't turn on when I require ('nameoffile')