{"id":14971457,"url":"https://github.com/manuelro/webpack-everest","last_synced_at":"2025-10-26T15:30:38.444Z","repository":{"id":57397416,"uuid":"92215963","full_name":"manuelro/webpack-everest","owner":"manuelro","description":"Everest is Webpack for Drupal themes without the harsh of having to know how Webpack works","archived":false,"fork":false,"pushed_at":"2017-05-31T20:23:29.000Z","size":1637,"stargazers_count":29,"open_issues_count":0,"forks_count":1,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-30T05:26:03.602Z","etag":null,"topics":["drupal","front-end","javascript","nodejs","webpack"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/manuelro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-23T20:17:58.000Z","updated_at":"2022-07-10T10:44:23.000Z","dependencies_parsed_at":"2022-09-07T01:53:26.387Z","dependency_job_id":null,"html_url":"https://github.com/manuelro/webpack-everest","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manuelro%2Fwebpack-everest","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manuelro%2Fwebpack-everest/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manuelro%2Fwebpack-everest/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manuelro%2Fwebpack-everest/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manuelro","download_url":"https://codeload.github.com/manuelro/webpack-everest/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238347932,"owners_count":19457017,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drupal","front-end","javascript","nodejs","webpack"],"created_at":"2024-09-24T13:45:13.925Z","updated_at":"2025-10-26T15:30:33.064Z","avatar_url":"https://github.com/manuelro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Everest](https://raw.githubusercontent.com/manuelro/webpack-everest/master/banner.jpg)\n\n# webpack-everest\n\n### Everest is Webpack for Drupal 8 themes without the harsh of having to know how Webpack works.\n\nEverest is a packager that uses the power of Webpack to leverage your front-end production process and enabling you to use industry high quality standards. It uses Webpack for dependencies bundling.\n\nThis project was initially started as a solution for a problem I happened to experience very often while generating front-end production ready code (JavaScript, CSS and static assets). It was initially thought for Drupal theming but it will be capable of adapting to also support theme generation for WordPress, although it can be easily extended if you know the how-to.\n\n---\n[![License:MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Build Status](https://travis-ci.org/manuelro/webpack-everest.svg?branch=master)](https://travis-ci.org/manuelro/webpack-everest)\n[![Coverage Status](https://coveralls.io/repos/github/manuelro/webpack-everest/badge.svg?branch=master)](https://coveralls.io/github/manuelro/webpack-everest?branch=master)\n\n## What's in the box?\n- ES6 out of the box\n- NPM automatic integration and module loading\n- Full Sass support with autoprefix (imported by `.js` or other `.sass` files)\n- Less support (imported by `.js` or other `.less` files)\n- Optional bundle graph visualization\n- Support for absolute output path\n- Support for browser autoreload\n- Unit testing with Mocha and Chai\n\n## Folder structure\n### Working directory structure (source)\n```\n│   my-theme.info.yml\n│   my-theme.libraries.yml\n│   my-theme-preview.png\n│\n├───config\n│       some-config-file.php\n├───css\n│       feature-one.scss\n├───images\n│       some-image.png\n├───js\n│   │   feature-one.js\n│   └───tests\n│           feature-one.test.js\n└───templates\n        page.html.twig\n```\n\n### Everest output (destination)\n```\n│   my-theme.info.yml\n│   my-theme.libraries.yml\n│   my-theme-preview.png\n│\n├───config\n│       some-config-file.php\n├───css\n│       main.css\n├───images\n│       some-image.png\n├───js\n│       bundle.js\n│       commons.bundle.js\n└───templates\n        page.html.twig\n```\n\n## Things Everest will do during the development and production processes\nExpect duplication in your destination folder, for instance, static files that you removed from your source folder will not be removed in your destination folder during development. Once you run `webpack -p` (in production mode) Everest will get control of the workflow and will do the following:\n- Clean your destination folder\n- Start to process to build a fresh output based only upon the things you are really using in your source folder\n- Put everything in your destination folder\n- Minify and uglify your JS files\n- Minify and concat your CSS/Sass/Less files and put them in your destination folder\n- Copy any top-level filed, such as `.yml` Drupal configuration files and theme preview image\n- Extract any common JS library and put it in a `commons.bundle.js` file\n\n## Installation and configuration\n### Installation\n#### Add Everest core to your NPM packages\n```\nnpm install webpack-everest --save-dev\n```\n\n#### Clone this repo\nAfterwards clone this repo. Your working directory will be located at `/src`, this folder contain a very simple app that implements React, some Sass and Less files, and some of the ES6 features.\n```\ngit clone https://github.com/manuelro/webpack-everest.git\n```\n#### Install the dependencies\nMake sure to run `npm install` to install everything Everest needs:\n\n### Drupal settings\nThe easiest way to start a Drupal project is by usin [Acquia Dev Desktop](https://dev.acquia.com/downloads), it allow you not only to create your Drupal instance, but will also generate a local domain for your project, which we'll use for our Everest configuration later on.\n\n#### Troubleshooting Drupal 8\n- Disable Drupal 8 cache and enable Twig debugging (see this great [video tutorial](https://www.youtube.com/watch?v=rRsOxSuJ4OU\u0026spfreload=1#t=148.143827)), remember to enable cache again once you're done with the development of your theme.\n- The first time you generate your theme Drupal 8 will complain and show you some errors, to fix it, make sure you run `http://mysitelocaldomain.com/rebuild.php`, this is going to refresh Drupal 8 internals and show you the theme working.\n\n## Everest API\nEverest API is very simple and is composed of only a few methods that will enable you to start working on your theme ASAP.\n\n**By default Everest will look for a `./src` folder in your project root, this is a convention and will always be respected by Everest.**\n\n### Importing Everest\nIf you cloned the sample app and installed all of its dependencies you should now be able to import Everest to your `webpack.config.js` file:\n```javascript\n//FILE: webpack.config.js\nconst everest = require('webpack-everest');\n```\n### everest.webpack.apply()\nThe `everest.webpack.apply()` method receives an object literal with configuration options you can pass to Everest for it to organize Webpack internals.\n#### Setup CWD path\nIn order to know where your source files are, Everest needs to know the current working directory of your project root folder (the one where you cloned the [sample app](https://github.com/manuelro/webpack-everest-sample.git)). To do this pass the `__dirname` using the `everest.webpack.apply()` method:\n```javascript\n//FILE: webpack.config.js\nconst everest = require('webpack-everest');\n\neverest.webpack.apply({\n  output: {\n    root: __dirname,\n  }\n});\n```\n#### Setup the destination folder name\nThe destination folder is the one which is going to contain your production-ready bundled code. You can either use a relative path or an absolute one, in case your project is inside a very distant folder.\n##### Relative folder resolution\n```javascript\n//FILE: webpack.config.js\nconst everest = require('webpack-everest');\n\n//Relative folder names will resolve to your working directory\neverest.webpack.apply({\n  output: {\n    root: __dirname,\n    dest: 'dist' //Can be anything, defaults to 'dist'\n  }\n});\n```\n##### Common libraries setup\nCommon libraries will be bundled in their own `dist/js/commons.bundle.js` file. In order to setup common libraries you should pass a `common` property to the options' entry configuration object.\n```javascript\n//FILE: webpack.config.js\nconst everest = require('webpack-everest');\n\neverest.webpack.apply({\n  output: {/*...*/},\n  entry: {\n    common: ['react', 'react-dom', 'underscore']\n  }\n});\n```\n##### Absolute folder resolution\n```javascript\n//FILE: webpack.config.js\nconst everest = require('webpack-everest');\n\n/*\nYou can obtain the absolute path of your Drupal 8 themes folder by right\nclicking it and copying the full location path. Note that Windows needs to\nescape backslashes in order to work as a valid folder location path\n*/\neverest.webpack.apply({\n  output: {\n    root: __dirname,\n    dest: 'D:\\\\my\\\\local\\\\drupal\\\\instalation\\\\themes\\\\winter'\n  }\n});\n```\n\n### everest.webpack.reload() - Optional\nEverest will automatically load the configuration after every apply call, but you can still calling `everest.webpack.reload()` method manually. `everest.webpack.reload()` does just that, refreshes the internal state to propagate the changes.\n```javascript\n//FILE: webpack.config.js\nconst everest = require('webpack-everest');\n\neverest.webpack.apply({\n  //...\n})\n.reload();\n```\nAs you can see, Everest supports method chaining for a cleaner coding experience. The equivalent to the previous code is the following:\n```javascript\n//FILE: webpack.config.js\nconst everest = require('webpack-everest');\n\neverest.webpack.apply({/*...*/});\n//It can be called with no arguments at all\neverest.webpack.reload();\n```\nThe reload method takes in an optional string value refering to each one of the top level Webpack API properties (`devtool`, `entry`, `externals`, `module`, `output`, `plugins`).\n\n### everest.webpack.provide() - Optional\nThe `everest.webpack.provide()` method provides namespaces as global variables in the window object. It is useful to expose the API of libraries like jQuery. It receives a configuration object that is passed to Webpack's [ProvidePlugin](https://webpack.js.org/plugins/provide-plugin/).\n```javascript\n//FILE: webpack.config.js\nconst everest = require('webpack-everest');\n\neverest.webpack.apply({\n  entry: {\n    //Make sure to import jQuery as a common library\n    common: ['jquery', 'bootstrap']\n  }\n})\n.provide({\n  $: 'jquery',\n  jQuery: 'jquery'\n});\n```\n\n### everest.webpack.sync() - Optional\nThe `everest.webpack.sync()` method enables [proxying](https://en.wikipedia.org/wiki/Proxy_server) and live reloading of your Drupal 8 theme with anything the server returns with automatic watchers for changes.\n```javascript\n//FILE: webpack.config.js\nconst everest = require('webpack-everest');\n\neverest.webpack.apply({\n  //...\n})\n.reload()\n.sync({\n  //The local domain provided by Acquia Dev Server\n  proxy: 'http://mysitelocaldomain.com'\n});\n```\n\nThis will open a browser and proxy a NodeJS server to the server provided by Acquia, this will automagically listen for changes in your working directory and reload the browser accordingly.\n\n### everest.webpack.visualize() - Optional\nData visualization in a graphic manner is very important for any front-end developer, it helps you to understand how bundles are organized and the size and optimization you can make to your code in order to keep things simple. This method will open a new browser window with a dynamic data visualization chart, this chart will reload whenever you make a change to your source code.\n```javascript\n//FILE: webpack.config.js\nconst everest = require('webpack-everest');\n\neverest.webpack.apply({\n  //...\n})\n.reload()\n.visualize();\n```\n## Running Webpack\nTo start the development environment and after configuring your `webpack.config.js` file you can either run `webpack --watch` or you can also create a script in your `package.json` file:\n```json\n\"scripts\": {\n  \"dev\": \"webpack --watch\",\n}\n```\nThen run `npm run dev` from the CLI.\n\n## Unit testing\nTo unit test your app make sure to add a script to the `scripts` section of your `package.json` file:\n```json\n\"scripts\": {\n  \"dev\": \"webpack --watch\",\n  \"test\": \"mocha --recursive --compilers js:babel-core/register src/**/*.test.js --watch --reporter spec\"\n}\n```\nThen run `npm run test` from the CLI.\n\n#### Testing React apps\nTo test React apps you have to first grab a copy of the `dom-setup.js` located in the original repo under `config/utilities/dom-setup.js`, put it wherever you like and add it as a requirement for mocha (using the `--require` flag), and you're ready to start coding.\n```json\n\"scripts\": {\n  \"dev\": \"webpack --watch\",\n  \"test\": \"mocha --require dom-setup.js --recursive --compilers js:babel-core/register src/**/*.test.js --watch --reporter spec\"\n}\n```\n\n\n## Exporting the configuration\nEvery `webpack.config.js` must export a valid configuration file, in order to do this simply add `module.exports = everest.webpack.config;` at the end of your Webpack config file:\n```javascript\n// FILE: webpack.config.js\nconst everest = require('webpack-everest');\n\neverest.webpack.apply({\n  output: {\n    root: __dirname,\n    dest: 'D:\\\\some\\\\absolute\\\\path',\n  }\n})\n.sync({\n  proxy: 'http://mysitelocaldomain.com'\n})\n.visualize();\n\nmodule.exports = everest.webpack.config;\n```\n## `package.json` scripts\nIn your `package.json` scripts you can add handy scripts to run your environment, this is a recommended setup:\n```json\n\"scripts\": {\n  \"dev\": \"webpack --watch\",\n  \"build\": \"webpack -p\",\n  \"test\": \"nyc mocha config/webpack/**/*.test.js --reporter spec\",\n  \"test-watch\": \"nyc mocha config/webpack/**/*.test.js --reporter spec --watch\",\n  \"coverage-local\": \"nyc istanbul cover ./node_modules/mocha/bin/_mocha config/webpack/**/*.test.js --reporter\",\n  \"coverage\": \"istanbul cover ./node_modules/mocha/bin/_mocha config/webpack/**/*.test.js --report lcovonly -- -R spec \u0026\u0026 cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js \u0026\u0026 rm -rf ./coverage\"\n}\n```\n\n## Everest is ready\nEverest is ready to start bundling your code. Happy bundling!\n\n## Contributions\nFeel free to contribute with any crazy idea you think can make this project even more useful for the community. Cheers!\n\n-- Manuel Ro\n\n---\n\nCopyright 2017 Manuel Ro\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanuelro%2Fwebpack-everest","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanuelro%2Fwebpack-everest","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanuelro%2Fwebpack-everest/lists"}