的WebPack添加JS庫

Question

的package.json：

{ 
    "name": "**", 
    "version": "1.0.0", 
    "description": "**", 
    "dependencies": { 
    "lodash": "4.17.4", 
    "jquery": "3.2.1", 
    "jplayer": "2.9.2", 
    "jquery-ui": "1.12.1", 
    "owl.carousel": "2.2.0", 
    "wowjs": "1.1.3" 
    }, 
    "devDependencies": { 
    "webpack": "2.3.3", 
    "webpack-dev-server": "2.4.2", 
    "html-webpack-plugin": "2.28.0", 
    "extract-text-webpack-plugin": "2.1.0", 
    "clean-webpack-plugin": "0.1.16", 
    "babel-core": "6.24.1", 
    "babel-loader": "6.4.1", 
    "babel-preset-es2015": "6.24.0", 
    "babel-plugin-transform-runtime": "6.23.0", 
    "uglify-js": "2.8.21", 
    "html-loader": "0.4.5", 
    "style-loader": "0.16.1", 
    "css-loader": "0.28.0", 
    "url-loader": "0.5.8", 
    "stylefmt": "5.3.2", 
    "file-loader": "0.11.1", 
    "purifycss-webpack": "0.6.0" 
    }, 
    "scripts": { 
    "build:dist": "webpack --env=prod --config=webpack.config.js", 
    "build:dev": "webpack-dev-server --env=dev --config=webpack.config.js" 
    } 
} 

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

module.exports = function (env) { 
    return { 
    devServer: { 
     inline: true 
    }, 
    devtool: 'source-map', 
    context: __dirname, 
    entry: { 
     landing: [ 
     './node_modules/wowjs', 
     './js/landing.js' 
     ] 
    }, 
    output: { 
     path: path.resolve(__dirname, './app/'), 
     filename: 'js/[name].js', 
     chunkFilename: '[id].js' 
    }, 
    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' 
     }), 
     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 CommonsChunkPlugin('bundle') 
    ] 
    }; 
}; 

landing.js：

$(() => { 
    const wow = new WOW({ 
    boxClass: 'wow', 
    animateClass: 'animated', 
    offset: 100, 
    mobile: false 
    }); 
    wow.init(); 
}); 

我用通訊和：的WebPack --env =督促--config = webpack.config.js

運行命令後，我在瀏覽器

但頁面上的錯誤打開網頁/app/index.html： 未捕獲ReferenceError：WOW未定義

Answer 1

這裏的問題是，當你的捆綁正在進行時。在那裏的某個地方，你的JS引用了WOW對象。目前沒有DOM存在，WOW未附加到DOM，因此您會看到該錯誤。

解決方案是使用ProvidePlugin，只要它是由任何塊創建的，它都會使引用成爲有效的引用。如文檔中描述：

Automatically loads modules. Whenever the identifier is encountered as free variable in a module, the module is loaded automatically and the identifier is filled with the exports of the loaded module .

在你的情況，你可以添加下面的代碼片段，它會工作

plugins: [ 
    .... 
     new webpack.ProvidePlugin({ 
     WOW: 'wowjs', 
     }) 
    ] 

*編輯：* 您傳遞給ProvidePlugin的值是一個誰模塊加載

所以對於

import 'jquery'; 

喲u'd使用

new webpack.ProvidePlugin({ 
    $: 'jquery', 
}) 

引擎蓋下，插件搜索地方導入jquery模塊，使參考使用。

回答您的評論。如果您已經使用import 'wowjs'你必須通過wowjs到插件的價值WOW

new webpack.ProvidePlugin({ 
    WOW: 'wowjs', 
}) 

對不起，在這部分失蹤了，我原以爲你會進口它的wow代替wowjs因爲這是正確的做法。

import * as wow from "wowjs" 

在任何情況下，你都可以使用上面的代碼片段，你應該很好去。