Ich lerne gerade erst, Webpack zu benutzen (vorher benutze ich einfach den manuellen Weg, um einzelne Skripte separat einzubinden). Und ich habe bootstrap-loader
zum Laden von Bootstrap verwendet. Hier ist meine webpack.config.js'jquery ist nicht definiert' wenn ich bootpack mit webpack lade
var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
module.exports = {
context: __dirname,
entry: './assets/js/index', // entry point of our app. assets/js/index.js should require other js modules and dependencies it needs
output: {
path: path.resolve('./assets/bundles/'),
filename: "[name]-[hash].js",
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'})
],
module: {
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}, // to transform JSX into JS
{ test: /\.css$/, loader: 'style-loader!css-loader'}, // to transform css
// images
{ test: /\.png$/, loader: 'url-loader?limit=100000'},
{ test: /\.jpg$/, loader: 'file-loader'},
// bootstrap image files
{ test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
],
},
resolve: {
modulesDirectories: ['node_modules', 'bower_components'],
extensions: ['', '.js', '.jsx'],
jquery: './vendor/jquery/jquery.js',
},
}
Und hier ist mein entry.js
global.jQuery = global.$ = require('jquery');
require('bootstrap-loader');
Dies scheint zu funktionieren. Allerdings habe ich das vorher benutzt und es hat nicht funktioniert:
window.jQuery = window.$ = require('jquery');
Ich fand die obige Zeile von so vielen Leuten vorgeschlagen. Aber ich bekomme einfach Fehler beim Laden der Seite. Nur einige Beispiele: some SO question, webpack issue, another SO question.
Später fand ich this question und this question. Die Seite funktioniert also auch mit der Bootstrap js-Funktionalität.
Ich werde mein package.json als auch für den Fall, fügen Sie es relevant ist:
{
"author": "franklingu",
"dependencies": {
"babel": "^6.5.2",
"babel-core": "^6.13.2",
"babel-loader": "^6.2.4",
"bootstrap-loader": "^1.2.0-beta.1",
"bootstrap-sass": "^3.3.7",
"extract-text-webpack-plugin": "^1.0.1",
"jquery": "^3.1.0",
"node-sass": "^3.8.0",
"resolve-url-loader": "^1.6.0",
"sass-loader": "^4.0.0",
"webpack": "^1.13.1",
"webpack-bundle-tracker": "0.0.93"
},
"devDependencies": {
"babel-core": "^6.13.2",
"babel-loader": "^6.2.4",
"css-loader": "^0.23.1",
"file-loader": "^0.9.0",
"node-sass": "^3.8.0",
"resolve-url-loader": "^1.6.0",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.1"
}
}
Ich bin neu in webpack aber ich bin nicht neu in JS. Ich frage mich, warum window.$
nicht funktioniert.
und ich frage mich, für webpack, warum einige Leute vorgeschlagen, diese in Plugins:
new webpack.ProvidePlugin({
'window.jQuery': 'jquery',
'window.$': 'jquery',
})
Einige Leute diese sind darauf hindeutet, (nicht für mich nicht funktionieren):
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
}
Ich spielte mit Knoten für eine Weile zurück und ich erinnerte mich, dass Knoten verwendet Anfrage js zum Laden (ich bin nicht sehr klar über Unterschiede zwischen Common vs require vs amd obwohl). Aber warum einige Leute gemeinsame js erwähnen?
Ich entwickelte Backend für einige Zeit und begann gerade Frontend - so viele Fragen tauchen auf. Es wäre nur genug, wenn Sie mir einen Link zu einem Leitfaden zur Verfügung stellen, der meine Zweifel klären kann/mein grundlegendes Verständnis davon aufbauen kann.
Ich habe dies in meine Frage gestellt. vielleicht kannst du es einfach nochmal lesen. Für mich funktioniert diese Lösung nicht –
Wenn Sie dieses Plugin verwenden, sollte es funktionieren und Sie müssen keinen Alias festlegen .. [check this seed] (https://github.com/jorawarsingh/es6-webpack-bootstrap-material -design) –
Hinweis: Sobald du jquery mit dem webpack plugin erstellt hast, musst du es nicht mit require importieren und du kannst zu dev tools gehen und $ eingeben, um zu sehen, dass jquery geladen wurde. ich sehe nichts anderes merkwürdiges in dir code es sollte einfach funktionieren :-) –