在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中包含第三方庫

回答

相關問題