时间戳

首页 > 解决方案 > 将所有默认 JS 文件从基本模板导入到 Webpack

javascript - 将所有默认 JS 文件从基本模板导入到 Webpack

问题描述

我正在尝试通过基于下载的模板（来自themeforest.net）开始一个新项目来学习 Webpack。

该模板包含许多 JS 文件（如 jquery.js、functions.js、plugins.animations.js 等），我想要对它们进行 webpacking，但是当我尝试使用 Jquery 构建 bundle.js 文件时出现错误。

webpack.config.js看起来像：

module.exports = {
    entry: path.resolve(__dirname, "apex/static/js/index.js"),
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "apex/static/dist")
    },
};

index.js看起来像：

require('./jquery.js');
require('./plugins.min.js');
require('./functions.js');
require('./custom.js');

当我重新加载包含 bundle.js 的 HTML 模板时，出现错误：

plugins.min.js:1 Uncaught ReferenceError: jQuery is not defined
    at eval (plugins.min.js:1)
    at Object../apex/static/js/plugins.min.js (bundle.js:48)
    at __webpack_require__ (bundle.js:82)
    at eval (index.js:3)
    at Object../apex/static/js/index.js (bundle.js:38)
    at __webpack_require__ (bundle.js:82)
    at bundle.js:118
    at bundle.js:120

所以我尝试包含第一个 jquery.js 和 bundle.js 之后像这样（仅用于测试）：

<script src="js/jquery.js"></script>
<script src="dist/bundle.js"></script>

我有一个新错误：

jquery.js:2 jQuery.Deferred exception: jRespond is not defined ReferenceError: jRespond is not defined
    at Object.defaults (webpack://django-webpack2/./apex/static/js/functions.js?:245:15)
    at Object.init (webpack://django-webpack2/./apex/static/js/functions.js?:88:25)
    at HTMLDocument.init (webpack://django-webpack2/./apex/static/js/functions.js?:2024:25)
    at e (http://localhost/static/js/jquery.js:2:30038)
    at t (http://localhost/static/js/jquery.js:2:30340) undefined
S.Deferred.exceptionHook @ jquery.js:2
t @ jquery.js:2
setTimeout (async)
(anonymous) @ jquery.js:2
c @ jquery.js:2
fireWith @ jquery.js:2
fire @ jquery.js:2
c @ jquery.js:2
fireWith @ jquery.js:2
ready @ jquery.js:2
B @ jquery.js:2
jquery.js:2 Uncaught ReferenceError: jRespond is not defined
    at Object.defaults (functions.js:245)
    at Object.init (functions.js:88)
    at HTMLDocument.init (functions.js:2024)
    at e (jquery.js:2)
    at t (jquery.js:2)

我尝试通过 npm 安装 jquery 并将其包含在 webpack.config.js 中：

resolve: {
        alias: {
            jquery: "jquery/src/jquery"
        }
    }

而且错误...

plugins.min.js:1 Uncaught ReferenceError: jQuery is not defined
    at eval (plugins.min.js:1)
    at Object../apex/static/js/plugins.min.js (bundle.js:58)
    at __webpack_require__ (bundle.js:1152)
    at eval (index.js:3)
    at Object../apex/static/js/index.js (bundle.js:38)
    at __webpack_require__ (bundle.js:1152)
    at bundle.js:1188
    at bundle.js:1190
eval @ plugins.min.js:1
./apex/static/js/plugins.min.js @ bundle.js:58
__webpack_require__ @ bundle.js:1152
eval @ index.js:3
./apex/static/js/index.js @ bundle.js:38
__webpack_require__ @ bundle.js:1152
(anonymous) @ bundle.js:1188
(anonymous) @ bundle.js:1190

你能帮我吗 ？我学到的所有教程都从头开始新项目......

谢谢你的时间！

标签： javascriptjquerynpmwebpackbundle

解决方案

推荐阅读