为静态网站捆绑 javascript 和 css？ （网络包？）

Question

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

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

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

• 虽然包含，但应该包含。

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