Created
July 2, 2019 11:51
-
-
Save madila/315fbfd905f84ac13a0905a859354b26 to your computer and use it in GitHub Desktop.
Webpack Hashed Assets Theme for Wordpress (Just the require structure)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* File location: /src/enqueue-assets-template.php */ | |
| <?php | |
| /** | |
| * Template for the webpack config to be replace the appropiate assets. It uses the shortcode format [asset_name] | |
| * The asset name is the webpack [name] of the original asset minus the extension, e.g. [theme.styles] for theme.styles.css | |
| * Enqueue scripts and styles. | |
| */ | |
| function webpack_enqueue_assets() { | |
| wp_enqueue_style( 'framework', get_template_directory_uri().'/assets/webpack/[framework]', array(), null ); | |
| wp_enqueue_script( 'main', get_template_directory_uri().'/assets/webpack/[main]', array(), null, true ); | |
| } | |
| add_action( 'wp_enqueue_scripts', 'webpack_enqueue_assets' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* File location: /src/scss/framework.scss */ | |
| @import "../../node_modules/bulma/bulma"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* File location: /src/js/main.js */ | |
| /* Project example of main.js */ | |
| import lazySizes from 'lazysizes'; | |
| import 'lazysizes/plugins/bgset/ls.bgset'; | |
| import 'lazysizes/plugins/unveilhooks/ls.unveilhooks'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "webpack-hashed-assets-theme", | |
| "title": "Webpack Hashed Assets Theme", | |
| "description": "Example of integration with Webpack Hashed Assets. Files are modified and copied to a single php for easy enqueueing.", | |
| "version": "0.1.0", | |
| "homepage": "http://www.ollieford.com", | |
| "author": { | |
| "name": "Ollie Ford & Co", | |
| "email": "ruben@ollieford.co.uk" | |
| }, | |
| "ignore": [ | |
| "**/.*", | |
| "node_modules", | |
| "bower_components", | |
| "test", | |
| "tests" | |
| ], | |
| "keywords": [], | |
| "devDependencies": { | |
| "@babel/core": "^7.0.0", | |
| "@babel/runtime-corejs2": "^7.0.0", | |
| "@wordpress/babel-preset-default": "^2.1.0", | |
| "autoprefixer": "^9.6.0", | |
| "babel-loader": "^8.0.0", | |
| "clean-webpack-plugin": "^3.0.0", | |
| "contenthash-replace-webpack-plugin": "^0.0.5", | |
| "copy": "^0.3.2", | |
| "cross-env": "^5.2.0", | |
| "css-loader": "^1.0.0", | |
| "cssnano": "^4.1.10", | |
| "extract-loader": "^2.0.1", | |
| "extract-text-webpack-plugin": "^4.0.0-beta.0", | |
| "file-loader": "^2.0.0", | |
| "gulp": "^4.0.2", | |
| "gulp-minify": "^3.1.0", | |
| "gulp-postcss": "^8.0.0", | |
| "gulp-rename": "^1.4.0", | |
| "gulp-sass": "^4.0.2", | |
| "postcss-cli": "^6.0.0", | |
| "postcss-loader": "^3.0.0", | |
| "sass-loader": "^7.1.0", | |
| "webpack": "^4.4.1", | |
| "webpack-cli": "^3.3.4" | |
| }, | |
| "dependencies": { | |
| "bulma": "^0.7.5", | |
| "lazysizes": "^5.1.0", | |
| "lodash": "^4.17.11", | |
| "throttle-debounce": "^1.0.1" | |
| }, | |
| "scripts": { | |
| "webpack": "npx webpack" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const path = require('path'); | |
| const { CleanWebpackPlugin } = require('clean-webpack-plugin'); | |
| const fileSystem = require("fs"); | |
| const useVersioning = true; | |
| const ExtractTextPlugin = require('extract-text-webpack-plugin'); | |
| function changeHashedAsset(php, oldName, newName) { | |
| php = php.replace(oldName, newName); | |
| return php; | |
| } | |
| module.exports = { | |
| mode: process.env.NODE_ENV === 'production' ? 'production' : 'development', | |
| entry: ['./src/js/main.js', './src/scss/framework.scss'], | |
| output: { | |
| path: path.resolve(__dirname, 'assets/webpack'), | |
| filename: useVersioning ? '[name].[hash:6].js' : '[name].js', | |
| publicPath: '/', | |
| }, | |
| plugins: [ | |
| new CleanWebpackPlugin(), | |
| new ExtractTextPlugin( | |
| useVersioning ? '[name].[md5:contenthash:hex:6].css' : '[name].css' | |
| ), | |
| function() { | |
| this.plugin("done", function(statsData) { | |
| const stats = statsData.toJson(); | |
| if (!stats.errors.length) { | |
| if(stats.assets.length > 0) { | |
| var php = fileSystem.readFileSync(path.join(__dirname, './src/enqueue-assets-template.php'), "utf8"); | |
| stats.assets.forEach(function(element, i) { | |
| let assetShortcode = '['+element.name.split('.')[0]+']'; | |
| php = changeHashedAsset(php, assetShortcode, element.name); | |
| }); | |
| fileSystem.writeFileSync(path.join(__dirname, "enqueue-assets.php"), php); | |
| } | |
| } | |
| }); | |
| } | |
| ], | |
| module: { | |
| rules: [ | |
| { | |
| test: /\.css$/, | |
| use: ExtractTextPlugin.extract({ | |
| fallback: 'style-loader', | |
| use: 'css-loader' | |
| }) | |
| }, | |
| { | |
| test: /\.scss$/, | |
| use: [ | |
| { | |
| loader: 'file-loader', | |
| options: { | |
| name: '[name].[contenthash].css', | |
| } | |
| }, | |
| { | |
| loader: 'extract-loader' | |
| }, | |
| { | |
| loader: 'css-loader?-url' | |
| }, | |
| { | |
| loader: 'postcss-loader' | |
| }, | |
| { | |
| loader: 'sass-loader' | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment