Question

我尝试在webpack中包含两个或三个插件，但我一直收到此错误：

TypeError：__ WWEPACK_IMPORTED_MODULE_0_jquery ___ default（...）（...）。XYZ不是函数

* XYZ是该软件包中函数的名称。

这是我的webpack配置：

＆＃13;

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('assets/css/[name].css');
const postCSSOptions = require('./postcss.config.js');
const packages = require('./package.json');
const MODULES_DIR = path.resolve(__dirname, './node_modules');
const extractCommons = new webpack.optimize.CommonsChunkPlugin({
    name: 'commons',
    filename: 'assets/js/commons.js'
});

const config = {
    context: path.resolve(__dirname, 'src'),
    entry: {
        app: './app.js',
        vendor: Object.keys(packages.dependencies)
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'assets/js/[name].js'
    },
    resolve: {
        extensions: ['.css', '.js', '.json'],
        modules: [MODULES_DIR]
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['es2015', {modules: false}]
                        ]
                    }
                }]
            },
            {
                test: /\.scss$/,
                loader: extractCSS.extract([
                    {
                        loader: 'css-loader' // translates CSS into CommonJS modules
                    },
                    {
                        loader: 'postcss-loader', // Run post css actions
                        options: postCSSOptions
                    },
                    {
                        loader: 'sass-loader'
                    }
                ])
            },
            {
                test: /\.less$/,
                use: [{
                    loader: 'style-loader' // creates style nodes from JS strings
                }, {
                    loader: 'css-loader' // translates CSS into CommonJS
                }, {
                    loader: 'less-loader' // compiles Less to CSS
                }]
            },
            {
                test: /\.css$/,
                loader: extractCSS.extract([
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'postcss-loader',
                        options: postCSSOptions
                    }
                ])
            },
            {
                test: /\.(woff|woff(2)|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                include: [
                    path.resolve(__dirname, 'src'),
                    path.resolve(__dirname, MODULES_DIR)
                ],
                loader: 'url-loader'
            },
            {
                test: /\.(png|jpg)$/,
                use: [
                    {
                        loader: 'file-loader?name=assets/images/[name].[ext]'
                    }
                ]
            },
            {
                test: /(^-partial)?\.html$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]'
                        }
                    },
                    {
                        loader: 'extract-loader'
                    },
                    {
                        loader: 'html-loader',
                        options: {
                            interpolate: true,
                            attrs: ['img:src']
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        extractCSS,
        extractCommons,
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            scrollOverflow: 'scrollOverflow',
            IScroll: 'iscroll',
            filterizr : 'filterizr'
        })
    ]
};

module.exports = config;

＆＃13;

在这种情况下，我得到filterizr插件的错误，（我之前尝试使用Isotope），当我在app.js脚本中初始化插件时（我已经初始化了我使用的所有插件）

我在使用scrollOverflow和Iscroll时也遇到了同样的错误，但是在ProvidePlugin

中添加它们之后它们现在正常工作

我尝试使用expose-loader来全局为所有脚本提供模块。

由于我的webpack文件中的vendor入口点会自动处理它，因此我没有在任何地方明确地包含供应商脚本。（如果已经检查过它们都包含在vendor.js中）。

非常感谢任何帮助。如果您需要更多代码段，请告诉我。

PS：我对webpack相当新。

Answer 1

只想过来，说'你好'＆＃39;并竖起大拇指 - 与vue-perfect-scrollbar有同样的问题。它使用传统的perfect-scrollbar，即使它正确地导入PS作为Perfect Scrollback（我可以从方法内部console.log PS），我进入控制台：

[Vue warn]: Error in mounted hook: "TypeError: 
__WEBPACK_IMPORTED_MODULE_0_perfect_scrollbar__.a.update is not a 
function"

found in

---> <VuePerfectScrollbar> at src/components/PerfectScrollbar.vue

当然，正确的console.log ged对象有PerfectScrollbar.prototype.update = function update () {，因此我猜测它是编译错误。

TypeError：__ WWEPACK_IMPORTED_MODULE_0_jquery ___ default（...）（...）。XYZ不是函数

1 个答案: