WordPressにwebpack
ワードプレス（WordPress）にwebpackを他力で対応させる方法です。
適当に書いておきます。時代の逆行を行くことに楽しみを感じながら最新の技術も学ぶノンプログラマーで何も知識はないですが、コンピュータとデータは好きです。
最新の技術と言いましても、恐らく新しいコード関係のことでしたら、ふつうに生活をしている人でしたら最新のコードから2年は遅れているように感じます。専門職や生業としてお仕事とされている方でしたら、当然私たちは本業ではないので、最新の技術はすでにご存知かと思います。
完全他力でワードプレス（WordPress）を活用して、webpackを導入する。
ほとんどドキュメントに書いてあります。
ワードプレステーマ（WordPress theme）は、テンプレートで有名なSageを活用させてもらいます。
あとはwebpack.js.orgやSageを制作しているRootsさんのroots.ioのGitHubを見れば大体のことは書いてあると思います。
ここでは、roots.ioのSageのGitHubやウェブサイトに記載されていることをそのまま一部参照引用させて頂きます。挙動が起きたら、webpack.js.org公式ドキュメントなどを見ると良いかもしれません。個人的には迷ったときにはW3Cを見ています。ご興味のある方はどうぞ。
roots.io/sage
Sage is a WordPress starter theme with a modern development workflow.
Features
Sass for stylesheets
Modern JavaScript
Webpack for compiling assets, optimizing images, and concatenating and minifying files
Browsersync for synchronized browser testing
Blade as a templating engine
Controller for passing data to Blade templates
CSS framework (optional): Bootstrap 4, Bulma, Foundation, Tachyons, Tailwind
See a working example at roots-example-project.com.
Requirements
Make sure all dependencies have been installed before moving on:
WordPress >= 4.7
PHP >= 7.1.3 (with php-mbstring enabled)
Composer
Node.js >= 8.0.0
Yarn
Theme installation
Install Sage using Composer from your WordPress themes directory (replace your-theme-name below with the name of your theme):
# @ app/themes/ or wp-content/themes/ $ composer create-project roots/sage your-theme-name
To install the latest development version of Sage, add dev-master to the end of the command:
$ composer create-project roots/sage your-theme-name dev-master
structure
themes/your-theme-name/ # → Root of your Sage based theme ├── app/ # → Theme PHP │ ├── Controllers/ # → Controller files │ ├── admin.php # → Theme customizer setup │ ├── filters.php # → Theme filters │ ├── helpers.php # → Helper functions │ └── setup.php # → Theme setup ├── composer.json # → Autoloading for `app/` files ├── composer.lock # → Composer lock file (never edit) ├── dist/ # → Built theme assets (never edit) ├── node_modules/ # → Node.js packages (never edit) ├── package.json # → Node.js dependencies and scripts ├── resources/ # → Theme assets and templates │ ├── assets/ # → Front-end assets │ │ ├── config.json # → Settings for compiled assets │ │ ├── build/ # → Webpack and ESLint config │ │ ├── fonts/ # → Theme fonts │ │ ├── images/ # → Theme images │ │ ├── scripts/ # → Theme JS │ │ └── styles/ # → Theme stylesheets │ ├── functions.php # → Composer autoloader, theme includes │ ├── index.php # → Never manually edit │ ├── screenshot.png # → Theme screenshot for WP admin │ ├── style.css # → Theme meta information │ └── views/ # → Theme templates │ ├── layouts/ # → Base templates │ └── partials/ # → Partial templates └── vendor/ # → Composer packages (never edit)
とざっくりですが、github.com/roots/sageに書いてあります。
リリース情報は、github.com/roots/sage/releasesに公開してくれています。
webpackに関しましては、webpack.js.orgやwebpack.github.ioなどのdocsなどを見ながらローカルで試してみてはいかがでしょうか。JavaScript関係でしたらECMAecma-international.orgやjs.orgjs.orgなどをご参考に、他力でいっきにという方は、webpack.js.org公式サイトを閲覧して制作するのか、GitHubさんなどのオープンソースなどに協力されてみてはいかがでしょうか。
