jQuery mit Webpack 2

Mein webpack.config.js sieht wie folgt:jQuery mit Webpack 2

var debug = process.env.NODE_ENV !== "production"; 
 
var webpack = require('webpack'); 
 
var path = require('path'); 
 
var node_dir = __dirname + '/node_modules'; 
 
const autoprefixer = require('autoprefixer'); 
 
const ProvidePlugin = require('webpack/lib/ProvidePlugin'); 
 

 
module.exports = { 
 
    context: path.join(__dirname, "src"), 
 
    devtool: debug ? "inline-sourcemap" : null, 
 
    entry: ['tether', 
 
    'font-awesome-loader',"bootstrap-loader","./js/client.js"], 
 
    resolve: { 
 
    extensions: ['.js', '.styl'], 
 
    alias: { 
 
     'jquery': node_dir + '/jquery/src/jquery.js', 
 
    } 
 
    }, 
 
    module: { 
 
    rules: [ 
 
     { 
 
     test: /\.jsx?$/, 
 
     exclude: /(node_modules|bower_components)/, 
 
     loader: 'babel-loader', 
 
     query: { 
 
      presets: ['react', 'es2015', 'stage-0'], 
 
      plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'], 
 
     } 
 
     }, 
 
     { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }, 
 
     { test: /\.scss$/, use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'] }, 
 
     { 
 
     test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
 
     use: 'url-loader?limit=10000', 
 
     }, 
 
     { 
 
     test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/, 
 
     use: 'file-loader', 
 
     }, 
 
     { 
 
     test: /\.styl$/, 
 
     use: [ 
 
     'style-loader', 
 
     'css-loader', 
 
     { 
 
      loader: 'stylus-loader', 
 
      /*options: { 
 
      use: [stylus_plugin()], 
 
      },*/ 
 
     }, 
 
     ], 
 
    }, 
 
     // Use one of these to serve jQuery for Bootstrap scripts: 
 

 
     // Bootstrap 4 
 
     { test: /bootstrap\/dist\//, use: 'imports-loader?jQuery=jquery' }, 
 
    ] 
 
    }, 
 
    output: { 
 
    path: __dirname + "/dist/", 
 
    filename: "client.min.js" 
 
    }, 
 
    plugins: [ 
 
    //new webpack.optimize.DedupePlugin(), 
 
    //new webpack.optimize.OccurenceOrderPlugin(), 
 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
 
    new webpack.ProvidePlugin({ 
 
     $: "jquery", 
 
     jQuery: "jquery", 
 
     "window.jQuery": "jquery", 
 
     Tether: "tether", 
 
     "window.Tether": "tether", 
 
     Alert: "exports-loader?Alert!bootstrap/js/dist/alert", 
 
     Button: "exports-loader?Button!bootstrap/js/dist/button", 
 
     Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel", 
 
     Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse", 
 
     Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", 
 
     Modal: "exports-loader?Modal!bootstrap/js/dist/modal", 
 
     Popover: "exports-loader?Popover!bootstrap/js/dist/popover", 
 
     Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy", 
 
     Tab: "exports-loader?Tab!bootstrap/js/dist/tab", 
 
     Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip", 
 
     Util: "exports-loader?Util!bootstrap/js/dist/util", 
 
    }), 
 
    new webpack.LoaderOptionsPlugin({ 
 
     postcss: [autoprefixer], 
 
    }) 
 
    ], 
 
};

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>React, Babel, Webpack 2</title> 
 
    </head> 
 
    <body class="container"> 
 
    <div id="app"></div> 
 
    <script src="jquery.timeago.js"></script> 
 
    <script src="client.min.js"></script> 
 
    
 
    </body> 
 
</html>

Aber wenn ich versuche jQuery.timeago() Funktion erhalte ich unten Fehler zu verwenden.

I wurde nach Reagieren By Example Buch. Wenn ich window.jQuery eintippe, erhalte ich einige seltsame Zahlen, die nach jQuery erscheinen. Aber wenn ich nur jQuery tippe, bekomme ich undefiniert. Da Bootstrap 4 und $ .ajax() funktionieren, bin ich sicher, dass jQuery enthalten ist, aber nicht sicher, warum jQuery undefiniert zeigt.

Kann jemand erklären, wie jQuery aufgenommen wird und was mache ich falsch. Abschnitt Ihrer webpack Config wie folgt

Quelle

2017-05-20 Abhilash D K

Add Plugin Plugin:

var webpack = require('webpack') 
... 

plugins: [ 
    new webpack.ProvidePlugin({ 
    $: 'jquery', 
    jQuery: 'jquery', 
    }) 
]

EDIT:

Sie haben zyklische Abhängigkeit:

timeago: jquery 
client: timeago jquery

aber jquery und client ist das gleiche Bündel. Versuchen Sie, Schalter schließen js Bündel in html wie folgt aus:

<script src="client.min.js"></script> 
<script src="jquery.timeago.js"></script>

statt:

<script src="jquery.timeago.js"></script> 
<script src="client.min.js"></script>

Wenn das nicht hilft, oder Sie haben einen anderen Fehler, die Sie benötigen jquery getrennt Bündel zu extrahieren und sie umfassen vor timeago. Ein anderer Weg ist jquery wie alte Schule zum Beispiel von CDN aufzunehmen und webpack wissen, dass wie folgt aus:

externals: { 
    jquery: 'jQuery' 
}

Um jquery getrennt Bündel zu extrahieren und für timeago Verwendung umfassen Sequence wie diese sichtbar machen:

<script src="common.js"></script> 
<script src="jquery.timeago.js"></script> 
<script src="client.min.js"></script>

Und webpack gemeinsamen Brocken Plugin wie folgt verwenden:

entry: { 
    common: ["jquery"], 
    ... 
}, 
plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
    name: "common", 
    filename: "common.js", 
    minChunks: Infinity, 
    }) 
],

Quelle

2017-05-21 06:26:51 oklas

HALLO. Wenn Sie meine Datei webpack.config.js sehen, habe ich das schon gemacht. Aber ich werde immer noch undefiniert. –

Ich erweitere eine Antwort. Hoffe, du wirst Erfolg haben. – oklas

Hallo. Ich habe die Reihenfolge der Skript-Tags geändert. Funktioniert nicht. Kannst du das erklären "du musst js zum getrennten Bündel extrahieren und es vor timeago einschließen". Ich bin neu im Webpack. –

jQuery mit Webpack 2

Antwort

Verwandte Themen