Question

我对Webpack很陌生，只想弄清楚这一点。

我想使用Webpack将Packery和Imagesload包含到我的WordPress网站中，但它似乎没有用。

这是我的文件夹结构：

以下是我的完整webpack.config.js

    var path = require('path');
    var ExtractTextPlugin = require('extract-text-webpack-plugin');
    var webpack = require('webpack');
    module.exports = {
        context: path.join(__dirname, 'src'),
        entry: {
            bundle: './js/bundle.js'
        },
        output: {
            path: './dist/js/',
            filename: 'bundle.js'
            // filename: '[name]bundle.js' For use with Multiple Bundles
        },
        module: {
            preLoaders: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: "jshint-loader"
                }
            ],
            loaders: [
                {
                    test: /\.(scss|sass)$/,
                    loader: ExtractTextPlugin.extract('style-loader', ['css-loader', 'pleeease-loader', 'postcss-loader?sourceMap=inline', 'sass-loader'])
                    // css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5] - CSSModules In Webpack
                },
                {
                    test: /\.js$/,
                    loader: 'babel',
                    exclude: /node_modules$/,
                    query: {
                        presets: ['es2015']
                    }
                },
                {
                    test: /isotope-layout/,
                    loader: 'imports?define=>false&this=>window'
                }
            ]
        },

      sassLoader: {
        includePaths: [path.join(__dirname, 'scss')]
      },

      postcss: [
       require('lost')
     ],

      pleeease: {
            autoprefixer: { browsers: ["last 4 versions", "ios 6"]},
            rem: true,
            minify: true,
            mqpacker: true,
            sourcemaps: false
        },

        resolve: {
            extensions: ['', '.js'],
            modulesDirectories: ["node_modules"],
            alias: {
                jquery: path.join(__dirname, "./node_modules/jquery/dist/jquery.min.js"),
                'imagesLoaded': 'imagesloaded',
                'masonry': 'masonry-layout',
                'isotope': 'isotope-layout',
                'packery': 'packery'
            }
        },

      plugins: [
           new ExtractTextPlugin('../css/style.css', {
             allChunks: true
         }),
         new webpack.ResolverPlugin([
                new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(".package.json", ["main"])
            ], ["normal", "loader"]),
            new webpack.ProvidePlugin({
                 $: "jquery",
                 jQuery: "jquery",
                 "window.jQuery": "jquery"
             })
         ]
    };

以下是我的bundle.js文件内容这位于src / js / bundle.js：

    require('../../src/scss/style.scss');
    require('jquery');
    var imagesLoaded = require('imagesloaded');
    var Packery = require('packery');

    imagesLoaded( '.grid', function() {
        new Packery( '.grid', {
            itemSelector: '.site__wrapper',
            layoutMode: 'packery'
        });
    });

下面是我的functions.php文件：

    /**
     * Enqueue scripts and styles.
     */
    function business_scripts() {

        // wp_dequeue_script( 'jquery' );
        // wp_deregister_script( 'jquery' );

        wp_enqueue_style( 'style', get_template_directory_uri() . '/dist/css/style.css' );

        // wp_enqueue_script( 'jquery', 'https://cdn.jsdelivr.net/jquery/3.1.1/jquery.min.js', array(), '', false );
        wp_enqueue_script( 'bundle', get_template_directory_uri() . '/dist/js/bundle.js', array('jquery'), '', true );

    }
    add_action( 'wp_enqueue_scripts', 'business_scripts' );

非常感谢任何帮助，

谢谢杰克。

使用WordPress和Webpack加载Packery和Images

0 个答案: