在webpack中包含第三方库

我正在尝试使用webpack将一个插件（freezeframe plugin）包含到我的应用程序中，但我无法理解如何执行此操作。我从我的应用程序本地提供此文件，而不是从cdn或npm/bower。我已经搜遍了全部，试图解决这个问题，但一直无法完成。在webpack中包含第三方库

我的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');在我VUE成分，但随后抱怨是没有定义的jQuery的。我已经通过NPM 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 
      }); 
     }); 
     }); 
    } 
    }

我现在不知道该怎么做。我不想只在index.html的顶部/底部包含另一个jquery和插件文件，因为我希望它捆绑在一起。

唯一的其他痛苦的事情是这个插件不是在npm和即时通讯不使用鲍尔。

UPDATE：

我已经看到了这个问题add-js-file，但我已经尝试过这样做的插件，但仍然得到当我需要（“nameoffile”）

来源

2016-12-02 saunders

不包括它的错误所以整天搜索后，我发现我不得不使用module.export填充插件。 shim plugin这意味着我可以这样写：您还需要在我的VUE文件安装exports-loader

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

。然后，我可以像以前一样使用它，将其添加到index.html

来源

2016-12-02 17:44:52 saunders

在webpack中包含第三方库

回答

相关问题