3

我正在尝试使用第三方库。

插件imagesLoaded无法与 webpack 一起正常工作。

webpack.config.js

    const path = require('path');
const ConcatPlugin = require('webpack-concat-plugin');

var ExtractTextPlugin = require('extract-text-webpack-plugin');

var webpack = require('webpack');
var recursive = require("recursive-readdir");

const FileHound = require('filehound');
const files = FileHound.create()
    .paths('./_src/js')
    .ext('js')
    .findSync();

var firstly = ['_src\\mains\\jquery.js'];
var filesToCombine = firstly.concat(files);
filesToCombine.push('_src\\mains\\main.js');

module.exports = {
    entry : {
        app : ['./_src/mains/main.js'],
        common: ['./_src/css/bundle.css','./_src/index.js'],
        // style : ['./_src/scss/style.scss','./_src/css/responsive.css']
    },
    output: {
        filename: 'js/[name].js',
        path: path.resolve(__dirname,'public/')
    },
    module: {
        rules: [
            { // regular css files
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader']
                })
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {loader: 'css-loader', options: {sourceMap: true} },
                        {loader: 'sass-loader', options: {sourceMap: true} }
                    ]
                })
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use : {loader: 'babel-loader', options: {sourceMap: true} }
            },
            {
                test: /\.(jpe?g|png|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]',
                    useRelativePath : true,
                    outputPath: path.resolve(__dirname,'public/')
                }
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin({
            filename: 'css/[name].css',
            allChunks: true
        }),

        // new ConcatPlugin({
        //     uglify: false, // or you can set uglifyjs options
        //     useHash: false, // md5 file
        //     sourceMap: true, // generate sourceMap
        //     name: 'app', // used in html-webpack-plugin
        //     fileName: 'js/[name].x.js', // would output to 'flexible.d41d8cd98f00b204e980.bundle.js'
        //     filesToConcat: filesToCombine
        //     // filesToConcat: ['./_src/js/bootsnav.js']
        // }),
    ]
};

index.js

var $ = require('./mains/jquery.js');
window.jQuery = $;
window.$ = $;

var imagesLoaded = require('imagesloaded');
imagesLoaded.makeJQueryPlugin( $ );
window.imagesLoaded = imagesLoaded;

require('./js/bootstrap.min');
require('./js/bootsnav');
require('./js/classie');
require('./js/equalize.min');
require('./js/hamburger-menu');
require('./js/isotope.pkgd.min');
require('./js/jquery.count-to');
require('./js/jquery.easing.1.3');
require('./js/jquery.easypiechart.min');
require('./js/jquery.fitvids');
require('./js/jquery.magnific-popup.min');
require('./js/jquery.nav');
require('./js/jquery.stellar');
require('./js/justified-gallery.min');
// window.Modernizr = require('./js/modernizr');
require('./js/page-scroll');
require('./js/retina.min');
require('./js/skill.bars.jquery');
require('./js/skrollr.min');

window.Swiper = require('./js/swiper.min');

require('./js/wow.min');

错误来自 main.js：

未捕获的类型错误：$portfolio_filter.imagesLoaded 不是函数

未捕获的类型错误：$(...).imagesLoaded 不是函数

main.js看起来像这样

    "use strict";
        var $ = require('./jquery.js');
        window.jQuery = $;
        window.$ = $;

        //
        // ...
        // ...
        //
    $(document).ready(function () {

         var $portfolio_filter = $('.portfolio-grid');
            $portfolio_filter.imagesLoaded(function () {
                $portfolio_filter.isotope({
                    layoutMode: 'masonry',
                    itemSelector: '.grid-item',
                    percentPosition: true,
                    masonry: {
                        columnWidth: '.grid-sizer'
                    }
                });
                $portfolio_filter.isotope();
            });
        //
        // ...
        // ...
        //
    });
        //
        // ...
        // ...
        //
    $(window).load(function () {
        var hash = window.location.hash.substr(1);
        if (hash != "") {
            setTimeout(function () {
                $(window).imagesLoaded(function () {
                    var scrollAnimationTime = 1200,
                        scrollAnimation = 'easeInOutExpo';
                    var target = '#' + hash;
                    if ($(target).length > 0) {

                        $('html, body').stop().animate({
                            'scrollTop': $(target).offset().top
                        }, scrollAnimationTime, scrollAnimation, function () {
                            window.location.hash = target;
                        });
                    }
                });
            }, 500);
        }
    });

我不知道为什么 Webpack 不加载 imagesLoaded 插件。我从 npm imagesLoaded 安装 - 没有解决问题。

有人有同样的问题吗？有人知道如何解决这个问题吗？

谢谢

4

0 回答 0