visit our website wpack.io for documentation and usage
Put simply, wpack.io is a nodejs based build tool to ease up using modern javascriptin WordPress Themes and Plugins. It gives a fine Developer Experience (DX) anda single dependency for all your bundling requirement.
It is a fine-tuned webpack/browser-sync configuration made specifically forWordPress Theme and Plugin Development.
With the rise of Gutenberg editor, the usage of modern JavaScript and librarieslike react is imminent. The goal of this tooling is to:
and eliminate the pain points such as:
.browserslistrc
).wp_enqueue_script
all generated parts.Here are a few more bonus you get for using wpackio.
Remember when that third-party plugin was using that old version of
foo
library which causedyour system to completely fail? No more!.
Everything is documented in our website.
@wpackio/scripts
to a project by running this.
npx @wpackio/cli
npm run bootstrap
wpackio.project.js
file to write your javascript entry-points.wpackio/enqueue
from composer to consume the assets.npm start
.npm run build
.Behind the scene wpack.io uses webpack along withbrowsersync.
It doesn't concern itself with providing boilerplate or starter templates. Itassumes that you (the awesome developer ���� || ����
) is already doing that and what youwant is a simple to configure, yet hackable to the core tooling for bundlingall your frontend assets (js, css, images, svgs) in the most optimized way andmake it work within your WordPress theme or plugin.
Keeping that in mind, wpack.io provides three dependencies for your projects:
@wpackio/entrypoint
- As main dependency of your package.json
.@wpackio/scripts
- As main dev dependency of your package.json
.wpackio/enqueue
- As main dependency of your composer.json
.The first handles all the tasks for building the assets and providing a damngood DX.
The second handles enqueuing the assets using WordPress' API (wp_enqueue_script
and wp_enqueue_style
).
Both the tools communicate with each other through the means of manifest.json
file. The first tell the later which files to consume and the later publicPath
to the first.
We have examples inside examples directory of this repo. Each ofthem has instructions in the readme file, so be sure to check out.
npx @wpackio/cli
Add wpack.io into any existing or new project. This command has to be runfrom within the project.
npm run bootstrap
/ yarn bootstrap
Bootstrap needed dependencies, dev dependencies according to the type of yourproject. This command is enabled by npx @wpackio/cli
.
Talking about example in plugins, we setup the entry-pointsin wpackio.project.js
file.
module.exports = {
// Project Identity
appName: 'wpackplugin', // Unique name of your project
type: 'plugin', // Plugin or theme
slug: 'wpackio-plugin', // Plugin or Theme slug, basically the directory name under `wp-content/<themes|plugins>`
// Used to generate banners on top of compiled stuff
bannerConfig: {
name: 'WordPress WebPack Bundler',
author: 'Swashata Ghosh',
license: 'GPL-3.0',
link: 'https://wpack.io',
version: '1.0.0',
copyrightText:
'This software is released under the GPL-3.0 License\nhttps://opensource.org/licenses/GPL-3.0',
credit: true,
},
// Files we need to compile, and where to put
files: [
// App just for showing react
{
name: 'reactapp',
entry: {
main: ['./src/reactapp/index.jsx'],
},
},
],
// Output path relative to the context directory
// We need relative path here, else, we can not map to publicPath
outputPath: 'dist',
// Project specific config
// Needs react?
hasReact: true,
// Needs sass?
hasSass: true,
// Externals
externals: {
jquery: 'jQuery',
},
// Webpack Aliases
alias: undefined,
// Show overlay on development
errorOverlay: true,
// Auto optimization by webpack
// Split all common chunks with default config
// <https://webpack.js.org/plugins/split-chunks-plugin/#optimization-splitchunks>
// Won't hurt because we use PHP to automate loading
optimizeSplitChunks: true,
// Usually PHP and other files to watch and reload when changed
watch: 'inc/**/*.php',
// Hook into babeloverride so that we can add react-hot-loader plugin
jsBabelOverride: defaults => ({
...defaults,
plugins: ['react-hot-loader/babel'],
}),
};
Now we do
composer require wpackio/enqueue
to install PHP Consumer Library.We instruct it to load files the right way (using WordPress APIs likewp_enqueue_script
and wp_enqueue_style
).
<?php
/*
Plugin Name: WPackIo Sample
Plugin URI: https://wpack.io
Description: A sample to demonstrate wpackio
Version: 0.1.0
Author: Swashata Ghosh
Author URI: https://swas.io
Text Domain: wpack-io
Domain Path: /languages
*/
// Assuming this is the main plugin file.
// Require the composer autoload for getting conflict-free access to enqueue
require_once __DIR__ . '/vendor/autoload.php';
// Do stuff through this plugin
class MyPluginInit {
/**
* @var \WPackio\Enqueue
*/
public $enqueue;
public function __construct() {
// It is important that we init the Enqueue class right at the plugin/theme load time
$this->enqueue = new \WPackio\Enqueue( 'wpackplugin', 'dist', '1.0.0', 'plugin', __FILE__ );
// Enqueue a few of our entry points
add_action( 'wp_enqueue_scripts', [ $this, 'plugin_enqueue' ] );
}
public function plugin_enqueue() {
// Enqueue the `main` entry from `reactapp` file entry.
$this->enqueue->enqueue( 'reactapp', 'main', [] );
}
}
// Init
new MyPluginInit();
npm start
/ yarn start
After configuring all entry-points and using the PHP library for consuming, westart the development server.
We edit the files and with proper setup, we can see things load live, withoutpage refresh. It is called, Hot Module Replacement (HMR).
In the above image we see, we are changing the label of from Todo App
toAwesome todo
. The changes are reflected live on the page, without any page-reload.
Once done, we press Ctrl + c to stop it.
npm run build
/ yarn build
Now we create production build.
Our plugin/theme is now ready to go live.
This Readme is not an extensive source of documentation. Please visit our websitewpack.io to learn more.
This project exists thanks to all the people who contribute. [Contribute].
Thank you to all our backers!
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]. (please ask your company to also support this open source project by becoming a sponsor).
工作中需要查看一些网站的JS语句,打心眼里对这种语法充满了鄙夷,优雅跟它没关系,一些烂写法很难读懂,简直就是反人类,太变态了。 下面举个小例子,因为篇幅原因,就复制了一小段,看看你能看懂多少? (window.webpackJsonp = window.webpackJsonp || [ ]).push([[36], { 1161: function (e, t) { //some codes }
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装 const webpack = require('webpack'); //访问内置的插件 const path = require('path'); const config = { entry: './path/to/my/entry/file.js
Webpack中入口的index.html中script标签的js如何打包? webpack构建一个angular项目,入口文件为index.html 里面用了script标签 引入../public/js/main.js的静态标签 在生产者模式时,这些js和相关的png不会打包到dist文件夹中。 即访问localhost:xxxx时会出现访问../public/js/main.js 404的错
BUUCTF [网鼎杯 2018]Fakebook 1 一.进入后,按人家网页,先注册个账号,再进入主页,发现url上有注入点no,而且试一下,是一个非常常规的注入 1.先order by ,可以发现有4列 2.接着 no=-1 union/**/select 1,2,3,4#过滤了(union select)用/**/代替空格 发现回显位为2,而且有反序列函数unserialize()
使用HtmlWebpackPlugin可以重构入口html,动态添加<link>和<script>,在以hash命名的文件上每次编译都会改变hash值 HtmlWebpackPlugin的配置参数如下 名称 类型 默认 描述 title {String} Webpack App 设置生成的HTML文件的title标签 filename {String} 'index.html' 设置生成的HTML
'use strict' const path = require('path') const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const baseWebpa
Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件。 直接上码: const path = require('path'); const MiniCssExtractPl
webpack:package.json中scripts的作用 为了在执行命令的时候输入太长的命令,我们可以将要执行的命令配置到 package.json的scripts中,因为scripts中配置可以 以键值对(key:value)的形式来取“别名”,在用npm run scripts中的key的时候,就相当于执行scripts的key键对应的value值,起到 达到“执行短的代码,起到相同的作
wp_register_script是一个脚本注册函数,注册完之后可以使用wp_enqueue_script去挂载脚本,使用wp_register_script可以有效的避免脚本在代码块重复的问题。 用法 wp_register_script( string $handle, string|bool $src, array $deps = array(), string|bool|null $ve
script-ext-html-webpack-plugin的使用 在webpack.config.js中使用 const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin'); new ScriptExtHtmlWebpackPlugin({ custom: { test: /\.js$/, attribut
比较高级, 比较漂亮也比较有用的一个反垃圾留言插言. 比较著名的reCAPTCHA为Wordpress提供. 但个人觉得太干扰用户了, 尤其是那个验证码, 留个言还要考验用户的视力和英文书法识别能力. 有够累
wp-spp:用C++写的一个Wordpress的搜索引擎,用了boost的正则表达式库和libmysql++,支持关键字高亮显示,速度比Wordpress自带的PHP搜索功能大约快一个数量级。
WP Editor.md 说明 Description WP Editor.md是一个漂亮又实用的在线Markdown文档编辑器。 WP Editor.md is a beautiful and practical Markdown document editor. 基于Editor.md构建对WordPress平台的支持。 Build support for the WordPress on E
WP-ShortStat是一个不错的WordPress访问统计插件,可以在WordPress的管理界面中显示简单的访问统计信息 WP-ShortStat的安装和使用非常简单,步骤如下: 1、下载插件文件wp-shortstat.php ; 2、上传wp-shortstat.php文件到WordPress根目录的wp-content/plugins/目录中; 3、进入WordPress管理界面的Pl
solitaire-wp 是一个游戏开发包, Solitaire XNA 演示了在 Windows Phone 7 上使用 XNA Game Studio 4.0 来实现 2D 纹理纸牌游戏(下图所示)。
Drumkit XNA 是一款虚拟的打击乐软件,通过记录你拍打的节拍形成曲子,同时你还可以在上面录音。