├── footer.php ├── public ├── css │ └── app.css └── js │ └── app.js ├── assets └── src │ ├── scss │ └── app.scss │ └── js │ ├── about.js │ └── app.js ├── postcss.config.js ├── yarn.lock ├── index.php ├── header.php ├── style.css ├── functions.php ├── package.json └── webpack.config.js /footer.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /public/css/app.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: green; } 3 | -------------------------------------------------------------------------------- /assets/src/scss/app.scss: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: green; 3 | } -------------------------------------------------------------------------------- /assets/src/js/about.js: -------------------------------------------------------------------------------- 1 | export function hello() { 2 | console.log("hello"); 3 | } -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | }; -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 2 | 3 |

4 |

Hello WordPack from Isaac

5 |

6 | 7 | -------------------------------------------------------------------------------- /assets/src/js/app.js: -------------------------------------------------------------------------------- 1 | import '../scss/app.scss'; 2 | 3 | import {hello} from './about.js'; 4 | 5 | hello(); 6 | 7 | let text = ` 8 | Hello World 9 | `; 10 | 11 | console.log(text); -------------------------------------------------------------------------------- /header.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | WordPack 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme Name: WordPack 3 | Author: Isaac Ben 4 | Description: Powerful and flexible theme that focuses on good foundations for future ease of development. 5 | Version: 1.0 6 | License: GNU General Public License v2 or later 7 | License URI: http://www.gnu.org/licenses/gpl-2.0.html 8 | 9 | This theme, like WordPress, is licensed under the GPL. 10 | Use it to make something cool, have fun, and share what you've learned with others. 11 | */ -------------------------------------------------------------------------------- /functions.php: -------------------------------------------------------------------------------- 1 | add_data( 'html5_shiv', 'conditional', 'lt IE 9' ); 16 | $wp_scripts->add_data( 'respond_js', 'conditional', 'lt IE 9' ); 17 | 18 | wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/public/js/app.js', array('jquery'), '', true ); 19 | } 20 | add_action( 'wp_enqueue_scripts', 'theme_js' ); 21 | 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wordpack", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack", 8 | "watch": "webpack --watch", 9 | "production": "cross-env NODE_ENV=production webpack" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "autoprefixer": "^6.7.5", 16 | "babel-core": "^6.23.1", 17 | "babel-loader": "^6.3.2", 18 | "babel-preset-es2015": "^6.13.2", 19 | "browser-sync": "^2.18.8", 20 | "browser-sync-webpack-plugin": "^1.1.4", 21 | "cross-env": "^3.1.4", 22 | "css-loader": "^0.26.2", 23 | "cssnano": "^3.10.0", 24 | "extract-text-webpack-plugin": "^2.0.0", 25 | "node-sass": "^4.5.0", 26 | "optimize-css-assets-webpack-plugin": "^1.3.0", 27 | "postcss-loader": "^1.3.2", 28 | "sass-loader": "^6.0.2", 29 | "style-loader": "^0.13.2", 30 | "uglify-js": "git://github.com/mishoo/UglifyJS2.git#harmony", 31 | "uglifyjs-webpack-plugin": "^0.2.1", 32 | "webpack": "^2.2.1" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const ExtractTextPlugin = require("extract-text-webpack-plugin"); 4 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); 5 | const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 6 | const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); 7 | 8 | const config = { 9 | entry: { 10 | app: './assets/src/js/app.js', 11 | }, 12 | output: { 13 | filename: '/js/[name].js', 14 | path: path.resolve(__dirname, 'public'), 15 | }, 16 | module: { 17 | rules: [ 18 | { 19 | test: /\.scss$/, 20 | use: ExtractTextPlugin.extract({ 21 | fallback: 'style-loader', 22 | use: ['css-loader', 'postcss-loader', 'sass-loader'] 23 | }), 24 | }, 25 | { 26 | test: /\.js$/, 27 | exclude: /(node_modules|bower_components)/, 28 | loader: 'babel-loader', 29 | query: { 30 | presets: ['es2015'] 31 | } 32 | } 33 | ] 34 | }, 35 | plugins: [ 36 | new ExtractTextPlugin('/css/[name].css'), 37 | new BrowserSyncPlugin({ 38 | proxy: 'wordpack.dev', 39 | port: 3000, 40 | files: [ 41 | '**/*.php' 42 | ], 43 | ghostMode: { 44 | clicks: false, 45 | location: false, 46 | forms: false, 47 | scroll: false 48 | }, 49 | injectChanges: true, 50 | logFileChanges: true, 51 | logLevel: 'debug', 52 | logPrefix: 'wepback', 53 | notify: true, 54 | reloadDelay: 0 55 | }) 56 | ] 57 | }; 58 | 59 | //If true JS and CSS files will be minified 60 | if (process.env.NODE_ENV === 'production') { 61 | config.plugins.push( 62 | new UglifyJSPlugin(), 63 | new OptimizeCssAssetsPlugin() 64 | ); 65 | } 66 | 67 | module.exports = config; 68 | -------------------------------------------------------------------------------- /public/js/app.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) 10 | /******/ return installedModules[moduleId].exports; 11 | 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ i: moduleId, 15 | /******/ l: false, 16 | /******/ exports: {} 17 | /******/ }; 18 | 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | 22 | /******/ // Flag the module as loaded 23 | /******/ module.l = true; 24 | 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | 29 | 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | 36 | /******/ // identity function for calling harmony imports with the correct context 37 | /******/ __webpack_require__.i = function(value) { return value; }; 38 | 39 | /******/ // define getter function for harmony exports 40 | /******/ __webpack_require__.d = function(exports, name, getter) { 41 | /******/ if(!__webpack_require__.o(exports, name)) { 42 | /******/ Object.defineProperty(exports, name, { 43 | /******/ configurable: false, 44 | /******/ enumerable: true, 45 | /******/ get: getter 46 | /******/ }); 47 | /******/ } 48 | /******/ }; 49 | 50 | /******/ // getDefaultExport function for compatibility with non-harmony modules 51 | /******/ __webpack_require__.n = function(module) { 52 | /******/ var getter = module && module.__esModule ? 53 | /******/ function getDefault() { return module['default']; } : 54 | /******/ function getModuleExports() { return module; }; 55 | /******/ __webpack_require__.d(getter, 'a', getter); 56 | /******/ return getter; 57 | /******/ }; 58 | 59 | /******/ // Object.prototype.hasOwnProperty.call 60 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 61 | 62 | /******/ // __webpack_public_path__ 63 | /******/ __webpack_require__.p = ""; 64 | 65 | /******/ // Load entry module and return exports 66 | /******/ return __webpack_require__(__webpack_require__.s = 1); 67 | /******/ }) 68 | /************************************************************************/ 69 | /******/ ([ 70 | /* 0 */ 71 | /***/ (function(module, exports) { 72 | 73 | // removed by extract-text-webpack-plugin 74 | 75 | /***/ }), 76 | /* 1 */ 77 | /***/ (function(module, exports, __webpack_require__) { 78 | 79 | "use strict"; 80 | 81 | 82 | __webpack_require__(0); 83 | 84 | var _about = __webpack_require__(5); 85 | 86 | (0, _about.hello)(); 87 | 88 | var text = '\n\tHello World\n'; 89 | 90 | console.log(text); 91 | 92 | /***/ }), 93 | /* 2 */, 94 | /* 3 */, 95 | /* 4 */, 96 | /* 5 */ 97 | /***/ (function(module, exports, __webpack_require__) { 98 | 99 | "use strict"; 100 | 101 | 102 | Object.defineProperty(exports, "__esModule", { 103 | value: true 104 | }); 105 | exports.hello = hello; 106 | function hello() { 107 | console.log("hello"); 108 | } 109 | 110 | /***/ }) 111 | /******/ ]); --------------------------------------------------------------------------------