Question

我在前端有这个错误：

未捕获的ReferenceError：$未定义

这是在我尝试将文件夹中的所有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需要某种独特的方法吗？

或者如果这与＆＃34;命令相关＆＃34;捆绑的文件，我认为webpack能够通过设计克服这个问题吗？

修改：

我放弃了使用glob的方法，而是选择使用包含第三方js库和jQuery插件的import语句的单个条目文件，例如：

entry_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等错误。

Answer 1

我最终这样做了：

在webpack.config.js：

位于文件顶部：

var webpack = require("webpack");

在plugins属性中：

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

并且不在entry_file.js中导入jQuery。

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

https://stackoverflow.com/a/28989476

Answer 2

在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'}
    ]
};

未捕获的ReferenceError：与webpack捆绑后未定义$

2 个答案: