捆绑javascript&；静态网站的css？（网页包？）

我正在尝试将所有javascript文件捆绑在一起，我正在静态HTML网站中使用这些文件。到目前为止，它们都是未连接的，通过

script

标记包含在不同的HTML文件中

我现在创建了一个main.js文件，它只需要所有其他文件，这样我就可以使用它作为我的网页入口点

这似乎适用于我自己编写的文件，但bootstrap、tether和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

Uncaught错误：引导程序的JavaScript需要jQuery。jQuery必须包含在引导的JavaScript之前。
反对。（bundle.js:119）
at\uuuuu网页包\uuuuuu需要（bundle.js:20）
反对。（bundle.js:79）
at\uuuuu网页包\uuuuuu需要（bundle.js:20）
反对。（bundle.js:70）
at\uuuuu网页包\uuuuuu需要（bundle.js:20）
at bundle.js:63
在bundle.js:66

• 尽管它被包括在内，或者应该包括在内

---

在您的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'）
在您的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'）
Webpack将
SASS/CSS
与
Webpack
捆绑在一起，使用它应该是直接的，因为您可以将它捆绑到单个文件中，并将其包含在
html
页面中。使用
JavaScript
时，如果将
标记中的所有内容散布在
html
页面上，这将是一件棘手的事情。如果您可以编写
JavaScript
，只需将其包含在主页上，那么您可以使用
webpack
。最简单的方法是使用类似于
React
，
Vue
，
Aurelia
，
Angular
Hmm的框架。谢谢您的回答。我不太明白为什么使用javascript会更困难？我刚才试过了，但不起作用。刚刚编辑了我的问题。您的引导、tether和jquery文件已缩小。您得到的错误是什么？错误好像我从未包含这些文件。缩小是一个问题吗？Webpack将
SASS/CSS
与
Webpack
捆绑在一起，使用它应该是直接的，因为您可以将它捆绑到一个文件中，并将其包含在
html
页面中。使用
JavaScript
时，如果将
标记中的所有内容散布在
html
页面上，这将是一件棘手的事情。如果您可以编写
JavaScript
，只需将其包含在主页上，那么您可以使用
webpack
。最简单的方法是使用类似于
React
，
Vue
，
Aurelia
，
Angular
Hmm的框架。谢谢您的回答。我不太明白为什么使用javascript会更困难？我刚才试过了，但不起作用。刚刚编辑了我的问题。您的引导、tether和jquery文件已缩小。您得到的错误是什么？错误好像我从未包含这些文件。缩小是一个问题吗？谢谢，我刚刚尝试了这个，但是我得到了一个
意外的标识符错误
？对不起，遗漏了一个逗号。编辑。请再试一次。哦，对不起，我没有看到。每个文件都有以下错误：
未找到/js/bootstrap.js模块中的错误：错误：无法解析/Applications/XAMPP/xamppfiles/htdocs/hs/js'./js/bootstrap.js 1:0-17@./js/main.js@multi./js/main
对不起，我不熟悉你的目录结构。您需要处理jquery文件的相对路径。也许可以尝试将alias字段中的路径更改为此
jquery:“./jquery-3.1.1.slim.min.js”
谢谢，我刚刚尝试了这个，但是我得到了一个
意外的标识符错误
？对不起，漏掉了一个逗号。编辑。请再试一次。哦，对不起，我没有看到。每个文件都有以下错误：
未找到/js/bootstrap.js模块中的错误：错误：无法解析/Applications/XAMPP/xamppfiles/htdocs/hs/js'./js/bootstrap.js 1:0-17@./js/main.js@multi./js/main
对不起，我不熟悉你的目录结构。您需要处理jquery文件的相对路径。也许可以尝试将alias字段中的路径更改为此<代码>jquery:“./jquery-3.1.1.slim.min.js”