捆绑javascript＆amp;静态网站的CSS？ （的WebPack？）

Question

我正在尝试将所有javascript文件捆绑在一起，我在静态HTML网站中使用它。截至目前，它们都是未连接的，通过script标记包含在不同的HTML文件中。

我现在已经创建了一个main.js文件，它只需要所有其他文件，因此我可以将它用作我的webpack入口点。

这似乎与我自己编写的文件有关，但是引导程序，系绳和＆amp; jquery文件抛出错误。

注意：我没有通过npm安装jquery或bootstrap，我刚刚下载了javascript文件，将它们放在同一个文件夹中，并通过require将它们包含在main.js文件中。我的方式有什么不妥吗？

// 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');

编辑：

我的错误是：

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

• 虽然它包括在内，但应该是。

Answer 1

在你的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"
        }
    }
}

在你的main.js中： require('jquery');