2017-07-04 11 views
0

複数のファイルをバンドルに追加して縮小しようとしています。 Webpackは私に何のエラーも与えません。コードはコンパイルされ、縮小されますが、動作しません。WebpackとUglifyJsPluginを使用したコードの簡素化が機能しません

enter image description here

私のWebPACKの設定:

const path = require('path'); 
var webpack = require("webpack"); 

module.exports = { 
    entry: { 
    app: [ 
    './js/jquery-2.1.1.min.js', 
    './vendor/bootstrap4alpha/js/tether.min.js', 
    './vendor/bootstrap4alpha/js/bootstrap.min.js', 
    './js/ie10-viewport-bug-workaround.js', 
    './vendor/chartjs/Chart.bundle.min.js', 
    './vendor/chartjs/utils.js', 
    './vendor/spincrement/jquery.spincrement.min.js', 
    './js/adminux.js' 
    ] 
    }, 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    filename: 'bundle.min.js' 
    }, 
    plugins: [ 
    new webpack.optimize.UglifyJsPlugin({ 
     minimize: true, 
     mangle: true 
    }) 
    ] 
}; 

私は、ブラウザで私のアプリを実行すると、それは仕事と私のコンソールにエラーを与えるものではありません:

Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.

jqueryがバンドルされていないようですが、そうです。 jqueryをhtmlファイルに追加すると、tether.min.jsで次のエラーが出力されます

+0

:グローバル$を定義する

または使用のWebPACKのProvidePlugin。私はあなたがそれらのjsファイルを保管しているところであればどこでもいいと思う。指定された場所からファイルを取得できないようです。 –

+0

@SudhansuChoudharyもし何かがファイルパスに間違っているなら、私はproppackweエラーを得るだろう –

答えて

0

ブートストラップは$を使用する必要があります。これはwebpackのグローバル変数ではありません。

代わりにbootstrap-webpackを使用できます。フォルダ構造のダブルチェックを

new webpack.ProvidePlugin({ 
    // Automtically detect jQuery and $ as free var in modules 
    // and inject the jquery library 
    // This is required by many jquery plugins 
    jQuery: "jquery", 
    $: "jquery" 
}) 
関連する問題