Javascript 使用WordPress和Webpack制作Packey和Images
我对Webpack很陌生,只是想弄明白这一点Javascript 使用WordPress和Webpack制作Packey和Images,javascript,wordpress,webpack,packery,imagesloaded,Javascript,Wordpress,Webpack,Packery,Imagesloaded,我对Webpack很陌生,只是想弄明白这一点 我想使用Webpack将Packey和Images添加到我的WordPress网站中,但它似乎不起作用 以下是我的文件夹结构: 下面是我的完整webpack.config.js var path = require('path'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var webpack = require('webpack');
我想使用Webpack将Packey和Images添加到我的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' );
任何帮助都将不胜感激
谢谢你,杰克。“网页包似乎不起作用”什么样的“不起作用”?有错误消息吗?@RyanZim这是我的问题之一,没有错误消息,只是代码似乎没有执行。jQuery和dist/js/bundle.js都在网站上,这真的很让人困惑。浏览器控制台里什么都没有?@RyanZim一点都没有。你想让我把代码推到github上,这样你就可以带上它了吗?或者??可能对其他人有帮助;我不懂网页;)“网页包但似乎不起作用”什么样的“不起作用”?有错误消息吗?@RyanZim这是我的问题之一,没有错误消息,只是代码似乎没有执行。jQuery和dist/js/bundle.js都在网站上,这真的很让人困惑。浏览器控制台里什么都没有?@RyanZim一点都没有。你想让我把代码推到github上,这样你就可以带上它了吗?或者??可能对其他人有帮助;我不懂网页;)