Я только начинаю учиться использовать Webpack (ранее я просто использовал ручной способ включения отдельных скриптов отдельно). И я использовал bootstrap-loader
для загрузки бутстрапа. Вот мой webpack.config.js
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',
},
}
И вот мой entry.js
global.jQuery = global.$ = require('jquery');
require('bootstrap-loader');
Кажется, это работает. Однако я использовал это раньше, и это не сработало:
window.jQuery = window.$ = require('jquery');
Я нашел линию выше, предложенную таким количеством людей. Но я просто получаю ошибки при загрузке страницы. Несколько примеров: какой-то вопрос SO, проблема с webpack, другой вопрос SO.
Позже я нашел этот вопрос и этот вопрос. Таким образом, на самом деле страница работает с функциональностью bootstrap js.
Я также добавлю свой пакет.json, если это будет уместно:
{
"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"
}
}
Я новичок в webpack, но я не новичок в JS. Мне интересно, почему window.$
Не работает.
И мне интересно, для webpack, почему некоторые люди предложили это в плагинах:
new webpack.ProvidePlugin({
'window.jQuery': 'jquery',
'window.$': 'jquery',
})
Некоторые люди предлагают это (я тоже не работал):
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
}
Некоторое время я играл с узлом, и я вспомнил, что этот узел использует запрос js для загрузки (я не очень понимаю различия между обычными vs require vs amd, хотя). Но почему некоторые люди упоминают общие js?
Я занимался разработкой бэкэнда в течение некоторого времени и просто начал интерфейс - так много вопросов появляются. Это было бы достаточно, если бы вы предоставили мне ссылку на какое-то руководство для чтения, которое может очистить мои сомнения/построить мое основное понимание этих вопросов.