使用Webpack和UglifyJsPlugin縮小代碼不起作用

我想要添加多個文件到束中並縮小它。 Webpack不會給我任何錯誤，代碼被編譯和縮小，但它不起作用。使用Webpack和UglifyJsPlugin縮小代碼不起作用

我的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不在捆綁，但它是。當我在html文件中添加jquery時，它會輸出帶有tether.min.js的下一個錯誤。

來源

2017-07-04 Michał Lipa

上的文件夾結構仔細檢查。我的意思是無論你在哪裏保存這些js文件。看起來它無法從指定位置獲取文件。 –

@SudhansuChoudhary如果文件路徑有任何錯誤，我會顯然會得到webpack錯誤 –

bootstrap需要使用$，它不是webpack中的全局變量。

您可以改爲使用bootstrap-webpack。

或使用的WebPack ProvidePlugin定義一個全局$：

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" 
})

來源

2017-07-05 03:37:07

使用Webpack和UglifyJsPlugin縮小代碼不起作用

回答

相關問題