Thème WordPress Bootstrap 4 avec Webpack et Yarn

by Julien Gustin

September 29, 2018

5,118

0

Voici le code de base pour intégrer le système de dépendance Yarn dans votre thème wordpress et l’intégration de Webpack vous aidant à organiser vos JS en modules. J’ai également intégré un minifieur javascript et css.

Structure de votre dossier

La structure de base a créer dans votre thème :

wp-content/themes/<theme-name>/
├── assets
│   ├── build
│   │   ├── js
│   │   │   └── theme.js
│   │   └── sass
│   │       ├── theme.scss
│   ├── config
│   │   └── webpack.config.js
│   └── dist
│       ├── css
│       └── js
├── postcss.config.js

Postcss.config.js

module.exports = {};

Initialisation de Yarn

Positionnez vous à la racine de votre thème et lancer la ligne de commande

yarn init

Vous avez maintenant un fichier package.json.

Modifiez le pour rajouter les directives scripts :

{
  "name": "Theme wordpress",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack --progress --config assets/config/webpack.config.js",
    "watch": "webpack --hide-modules --watch --config assets/config/webpack.config.js",
    "prod": "webpack --progress -p --config assets/config/webpack.config.js"
  },
}

Installer les dépendances nécessaires

yarn add babel-cli babel-loader css-loader mini-css-extract-plugin node-sass optimize-css-assets-webpack-plugin sass-loader style-loader webpack webpack-cli postcss-loader uglifyjs-webpack-plugin file-loader url-loader --dev 

yarn add bootstrap font-awesome jquery popper.js tether

Webpack.config

const webpack = require('webpack');

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const path = require('path');

module.exports = {
    mode: 'production',
    // For production build we want to extract CSS to stand-alone file
    // Provide `extractStyles` param and `bootstrap-loader` will handle it
    entry: ['./assets/build/js/theme.js'],
    output: {
        path: path.join(__dirname, "../../assets/dist/js"),
        filename: "theme.js"
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true // set to true if you want JS source maps
            }),
            new OptimizeCSSAssetsPlugin({})
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({ filename: '../css/style.css', allChunks:true }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
        }),
    ],
    module: {
        rules: [
            { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'], },
            { test: /\.scss$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'], },
            { test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                // Limiting the size of the woff fonts breaks font-awesome ONLY for the extract text plugin
                // use: "url?limit=10000"
                use: 'url-loader', },
            { test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/, use: 'file-loader', },
        ],
    },
};

Créez votre fichier css et importez bootstrap

location : assets/build/sass/theme.scss

@import "~bootstrap/scss/bootstrap";
body{ background:blue; }

Créez votre fichier js et importez bootstrap

location : assets/build/js/theme.js

require('../sass/theme.scss');
require('bootstrap');

(function(window, document, $, undefined) {
    'use strict';

    $(function() {

       alert('Ready');

    }); // doc ready

})(window, document, window.jQuery);

Compiler

yarn run build
// OU
yarn run watch

Vous avez maintenant les fichier css et js compilés et compressés dans assets/dist et vous pouvez les charger dans votre theme via

wp_enqueue_style('jits-app-css', get_template_directory_uri() . '/assets/dist/css/style.css' );
wp_enqueue_script('jits-app-theme', get_template_directory_uri() . '/assets/dist/js/theme.js', array( ), null, true );

Le code sur github