Below you will find pages that utilize the taxonomy term “Webpack”
I’m in the process of converting my WordPress site into a static site compiled from markdown files using the Hugo static site generator. For this task, I created a blank Hugo starter theme that uses Webpack and optional webpack-plugin-serve for UI development build live reload. screenshot Source Code Pre-requisites You will need Git and NodeJS with NPM installed. Installation For example, if your Hugo website is in the www folder.
webpack-plugin-serve logo I always thought it was odd to use the webpack-cli command webpack-dev-server instead of webpack in my npm script for development. Lo and behold, last month, webpack-plugin-serve was released, a new webpack plugin to use instead of the quirky webpack-dev-server. I’m using the fairly basic split configuration from my uiCookbook/sidebars application to demonstrate how to replace webpack-dev-server with the new webpack-plugin-serve plugin Requirements Active LTS Node version, e.
How to create a WordPress custom shortcode to display photos from flickr. This post documents using the Slick Lazy Load Photo Grid along with the flickr API to render photo albums in Wordpress Posts wherever the shortcode is entered. Webpack 4, autoprefixer, and babel are included for building the JS and CSS. Requirements flickr API key. From their API page, select the Create an App link for more information on how to request an API key.
This post documents how to create a fully responsive flexbox content layout that contains a pure CSS open/close toggle for the left and right sidebars. The CSS is built from Sass using Webpack with Autoprefixer. For development, a Webpack Dev Server is included. Features Pure CSS Sidebar toggle Sass CSS preprocessor PostCSS Autoprefixer CSSnano Webpack 4 Webpack Dev Server demo and edit this code in our online sandbox
This post documents how to take the WordPress Starter Theme _s or underscores, if you like and build only the CSS components you want using Webpack 4. This modern toolset also includes autoprefixer and browserlist support. You might only want the normalizer and accessibility modules, any combination of modules, or none at all to start with a completely blank slate. This build process will give you a solid foundation and all the latitude you need.
Sass Install the loaders to preprocess the Sass files. SASS Loader compiles Sass to CSS, also requires node-sass. npm install --save-dev sass-loader node-sass PostCSS Loader processes CSS with PostCSS. npm install --save-dev postcss-loader CSS Loader resolves import at-rules and url functions in the CSS. npm install --save-dev css-loader Style Loader inlines <style></style> in the DOM. npm install --save-dev style-loader URL Loader and Resolve URL Loader handle relative paths.
This follow up to the basic Webpack 3 Sass preprocessor workflow I wrote about here includes how to handle processing of relative URLs in the Sass for things like fonts and images. Ken Wheeler’s popular Slick carousel contains these asset types in its Sass, so let’s use that for this exercise. Getting Started Prerequisite: Node.js with npm. Navigate to the project root in your CLI, such as Terminal, Cygwin or PowerShell.
This post is a simple proof of concept for using the new WordPress REST API to submit a new post draft from the front end. The form and user inputs are built using the Vue.js framework and vue-cli to create a simple Webpack build configuration. Demo on YouTube Environment This example was created using a fresh install of WordPress 4.7 served by XAMMP on Windows 10.
Webpack Vue.js CLI Use vue-cli to download vuejs, webpack and template dependencies and create the project in the root of our plugin folder. Navigate to the wp-content/plugins directory. Update or install globally as needed. # update npm update -g vue-cli # or install npm install -g vue-cli Change to the wordpress plugins directory and use vue-cli to install the webpack-simple template into the new wp-api-vuejs-poc folder. For example,
This post is a refresh of Laravel JWT Auth with Vue.js I posted in September that applies to the 1.x version of Vue.js. Evan You released vue.js version 2 shortly thereafter and this post will cover building the Laravel JSON Web Token based authentication with it. February 11, 2017 – A lot has changed in the last 4 months with Vue.js and Webpack. Since Vue.js 2.1.x and Webpack 2.
Vue Resource In order to post the Registration form data, the Vue.js resource plugin needs to be installed. npm i vue-resource --save-dev Update resources/js/app.js to import the vue-resource plugin after the vue-router. Add the Vue.use statement for the vue-resource. Add the Vue.http.headers and Vue.http.options.root url. Laravel VerifyCsrfToken middleware will check for the X-CSRF-TOKEN request header. To make this token available to the client side script, it is being stored in the csrf-token meta tag near the top of the web page.
Sign in Form Add the following code to the Signin.vue file. Signin.vue <template> <div> <div class="alert alert-danger" v-if="error"> <p>There was an error, unable to sign in with those credentials.</p> </div> <form autocomplete="off" v-on:submit="signin"> <div class="form-group"> <label for="email">E-mail</label> <input type="email" id="email" class="form-control" placeholder="email@example.com" v-model="email" required> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" id="password" class="form-control" v-model="password" required> </div> <button type="submit" class="btn btn-default">Sign in</button> </form> </div> </template> <script> import auth from '.
This post is a simple proof of concept for using vue-cli to scaffold a Webpack Laravel project. The production build modifies the default Laravel blade view and outputs the built assets into the public/static directory. The development workflow demonstrates hot reloading and css style extraction. Environment This example was created using a fresh install of Laravel 5.2 served by XAMMP on Windows 10. Nodejs version 6.9.1 NPM version 3.