我正在尝试将我在静态 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'
}
}
主要.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
- 虽然它被包括在内,或者应该被包括在内。
最佳答案
在你的 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');
关于javascript - 为静态网站捆绑javascript和css? (网页包?),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44828311/