翻译I am just starting to learn to use Webpack (previously I just use the manual way to include individual scripts separately). And I used bootstrap-loader for loading bootstrap. Here is my 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', }, }And here is my entry.js
global.jQuery = global.$ = require('jquery'); require('bootstrap-loader');This seems to work. However, I used this before and it did not work:
window.jQuery = window.$ = require('jquery');I found the line above suggested by so many people. But I just simply get errors when load the page. Just some examples: some SO question, webpack issue, another SO question.
Later I found this question, and this question. So the page actually works with bootstrap js functionality working as well.
I will add my package.json as well in case it is relevant:
{ "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" } }I am new to webpack but I am not new to JS. I am wondering why window.$ is not working.
And I wonder, for webpack, why some people suggested this in plugins:
new webpack.ProvidePlugin({ 'window.jQuery': 'jquery', 'window.$': 'jquery', })Some people are suggesting this (did not work for me either):
resolve: { alias: { jquery: "jquery/src/jquery" } }I played with node for a while back then and I remembered that node makes use of request js for loading(I am not very clear about differences between common vs require vs amd though). But why some people mention common js?
I was developing backend for some time and just started frontend--so many questions are popping up. It would just enough if you provide me with some link to some guide to read which can clear my doubts/build my basic understanding of these.