代码之家 › 专栏 › 技术社区 › user1063287

未捕获的引用错误:与WebPack绑定后未定义:$

webpack

0

user1063287 · 技术社区 · 7 年前

我在前端有这个错误:

未捕获的引用错误:未定义:$

这是在我尝试将文件夹中的所有JS文件(包括jquery)绑定到1个文件之后使用的:

var glob = require("glob");

module.exports = {
    entry: {
        bundle:  glob.sync("./src/js/*.js")
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "dist/js")
    },

生成时没有错误。

绑定jquery是否需要某种独特的方法?

或者,如果这与捆绑文件的“顺序”有关,我认为Webpack能够通过设计来克服这个问题?

编辑:

我放弃了这种使用 glob ,而不是选择使用具有第三方JS库和jquery插件的导入语句的单个条目文件,例如:

条目_file.js:

import hljs from './highlight';

import $ from './jquery';

webpack.config.js版本:

module.exports = {
    entry: "./src/js/entry_file.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist/js")
    },

然而,这种新方法并非没有它自己的麻烦,因为一些插件/库有自己的特性,并抛出错误,比如 Uncaught ReferenceError: jQuery is not defined 等。

2 回复 | 直到 7 年前

1

0

user1063287 7 年前

我最终做了这个:

在 webpack.config.js :

在文件顶部:

var webpack = require("webpack");

在 plugins 属性:

plugins: [
   new webpack.ProvidePlugin({
        $: "./jquery-3.3.1",
        jQuery: "./jquery-3.3.1"
    })
],

不导入jquery entry_file.js .

这个方法的灵感来自于这个答案中的第二点:

https://stackoverflow.com/a/28989476

2

-1

Codedreamer 6 年前

在webpack.config.js中,必须需要webpack

var path = require('path');
var webpack = require("webpack");

module.exports = {
    entry: './src/js/app.js',
    devtool: 'source-map',
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'dist/js'),
        filename: 'main.min.js'
    }
};

希望这有帮助。

如果您正在构建一个包或库供客户端在浏览器上使用,那么您可能需要添加一个加载程序,例如编译所有资产。

module.exports = {
    entry: './src/js/app.js',
    devtool: 'source-map',
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'dist/js'),
        filename: 'main.min.js'
    },
    loaders: [
        {test: /\.js$/, loader:'buble'}
    ]
};