捆绑静态网站的javascript和CSS？ （的WebPack？）

Question

I am trying to bundle all of my javascript files together, which I am using in a static HTML website. As of now, they are all unconnected, included in different HTML files via the script tag.

I have now created a main.js file, which just requires all the other files, so that I can use this as my webpack entry point.

This seems to work with the files I wrote myself, but the bootstrap, tether & jquery files are throwing errors.

Note: I have not installed jquery or bootstrap via npm, I have just downloaded the javascript files, put them in the same folder and included them in the main.js file via require . Is there anything wrong with the way I am going about this?

// webpack.config.js
var path = require('path')

module.exports = {
  entry: ['./js/main'], // file extension after index is optional for .js files
  output: {
    path: path.join(__dirname, 'js'),
    filename: 'bundle.js'
  }
}

main.js:

require('./jquery-3.1.1.slim.min.js');
require('./tether.min.js');
require('./bootstrap.min.js');
require('./navigation.js');
require('./geschichte.js');
require('./iziToast.min.js');
require('./kontakt.js');

edit:

My error is:

Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
    at Object.<anonymous> (bundle.js:119)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:79)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:70)
    at __webpack_require__ (bundle.js:20)
    at bundle.js:63
    at bundle.js:66

• although it is included, or should be.

Answer 1

In your webpack.config.js:

// webpack.config.js
var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: ['./js/main'], // file extension after index is optional for .js files
    output: {
        path: path.join(__dirname, 'js'),
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.ProvidePlugin({
           $: "jquery",
           jQuery: "jquery"
       })
    ],
    resolve: {
       alias: {
            jquery: "../jquery-3.1.1.slim.min.js"
        }
    }
}

In your main.js: require('jquery');