knallimall.org knallimall.org

User Tools

Site Tools

webpack_complete_webdevelopment_config

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Next revisionBoth sides next revision
webpack_complete_webdevelopment_config [2018/01/29 22:46] – [Webpack / Yarn Web Development Config] adminwebpack_complete_webdevelopment_config [2018/02/05 21:16] – [Slide 3] admin
Line 1: Line 1:
 +~~REVEAL dokuwiki~~
 ====== Webpack / Yarn Web Development Config ====== ====== Webpack / Yarn Web Development Config ======
  
 ===== What it does ... ===== ===== What it does ... =====
  
 +  * Build Webfont and corresponding SCSS (Webfont.scss.njk -> compiles to ->_webfont.scss)
   * Compile and process SCSS   * Compile and process SCSS
     * Lint     * Lint
Line 14: Line 16:
     * Uglify     * Uglify
     * Compress     * Compress
 +  * Generate KSS Styleguide
 +    * Icons included
 +    * Using custom template (index.hbs, kss-assets/kss.scss)
  
 +===== Yarn =====
 +
 +  * Define "workspaces" to install packages recursively
 +    * Workspace will be linked to ./node_modules/JoRo.Library (package.json -> "name")
 +    * Dependenies end up in ./node_modules/ :!:
 +  * Centralize/unify build commands
 +
 +<code bash Commands>
 +- development # Build assets for development
 +   webpack
 +- livereload  # Run PHP Server and watch for changes
 +   FLOW_CONTEXT=Development/Livereload ./flow server:run | webpack --watch
 +- production  # Build assets for production
 +   NODE_ENV='production' webpack
 +- watch       # Watch for changes and build files accordingly
 +   webpack --watch
 +</code>
 ===== package.json ===== ===== package.json =====
  
 <code javascript package.json> <code javascript package.json>
 { {
-  "name": "JoRo.Library", +    "name": "JoRo.Library", 
-  "version": "1.0.0", +    "version": "1.0.0", 
-  "description": "Template for Library Oberroth", +    "description": "Template for Library Oberroth", 
-  "scripts": { +    "scripts": { 
-    "production": "NODE_ENV='production' webpack", +        "production": "NODE_ENV='production' webpack", 
-    "development": "webpack", +        "development": "webpack", 
-    "watch": "webpack --watch", +        "watch": "webpack --watch", 
-    "livereload": "FLOW_CONTEXT=Development/Livereload ../../../../../../flow server:run | webpack --watch" +        "livereload": "FLOW_CONTEXT=Development/Livereload ./flow server:run | webpack --watch" 
-  }, +    }, 
-  "author": "Jochen Roth", +    "private": true, 
-  "license": "MIT", +    "workspaces": [ 
-  "dependencies": { +        "./Packages/Sites/JoRo.Library/Resources/Private/Library/" 
-    "ajv": "^6.0.1", +    ], 
-    "babel-core": "^6.26.0", +    "author": "Jochen Roth", 
-    "babel-loader": "^7.1.2", +    "license": "MIT", 
-    "babel-preset-env": "^1.6.1", +    "dependencies": { 
-    "babel-preset-es2015": "^6.24.1", +        "ajv": "^6.0.1", 
-    "caniuse-lite": "^1.0.30000697", +        "babel-core": "^6.26.0", 
-    "compression-webpack-plugin": "^1.1.3", +        "babel-loader": "^7.1.2", 
-    "css-loader": "^0.28.9", +        "babel-preset-env": "^1.6.1", 
-    "cssnano": "^3.10.0", +        "babel-preset-es2015": "^6.24.1", 
-    "extract-text-webpack-plugin": "^3.0.2", +        "caniuse-lite": "^1.0.30000697", 
-    "foundation-icons": "^1.0.1", +        "compression-webpack-plugin": "^1.1.3", 
-    "foundation-sites": "^6.4.3", +        "css-loader": "^0.28.9", 
-    "image-size": "^0.6.2", +        "cssnano": "^3.10.0", 
-    "jquery": "^3.2.1", +        "extract-text-webpack-plugin": "^3.0.2", 
-    "jshint": "^2.9.5", +        "foundation-icons": "^1.0.1", 
-    "jshint-loader": "^0.8.4", +        "foundation-sites": "^6.4.3", 
-    "kss": "^3.0.0-beta.18", +        "image-size": "^0.6.2", 
-    "kss-webpack-plugin": "^1.3.0", +        "jquery": "^3.2.1", 
-    "node-sass": "^4.7.2", +        "jshint": "^2.9.5", 
-    "postcss-cssnext": "^3.0.2", +        "jshint-loader": "^0.8.4", 
-    "postcss-import": "^11.0.0", +        "kss": "^3.0.0-beta.18", 
-    "postcss-loader": "^2.0.10", +        "kss-webpack-plugin": "^1.3.0", 
-    "postcss-url": "^7.3.0", +        "node-sass": "^4.7.2", 
-    "precss": "^3.0.0", +        "postcss-cssnext": "^3.0.2", 
-    "sanitize-filename": "^1.6.1", +        "postcss-import": "^11.0.0", 
-    "sass-lint": "^1.12.1", +        "postcss-loader": "^2.0.10", 
-    "sass-loader": "^6.0.6", +        "postcss-url": "^7.3.0", 
-    "sasslint-webpack-plugin": "^1.0.4", +        "precss": "^3.0.0", 
-    "style-loader": "^0.18.2", +        "sanitize-filename": "^1.6.1", 
-    "uglifyjs-webpack-plugin": "^1.1.6", +        "sass-lint": "^1.12.1", 
-    "webpack": "^3.10.0", +        "sass-loader": "^6.0.6", 
-    "webpack-sass": "^2.2.1", +        "sasslint-webpack-plugin": "^1.0.4", 
-    "webpack-watch-livereload-plugin": "^0.0.1", +        "style-loader": "^0.18.2", 
-    "webpack-webfont": "0.0.1-alpha.10", +        "uglifyjs-webpack-plugin": "^1.1.6", 
-    "what-input": "^4.3.1" +        "webpack": "^3.10.0", 
-  }, +        "webpack-sass": "^2.2.1", 
-  "devDependencies": {}+        "webpack-watch-livereload-plugin": "^0.0.1", 
 +        "webpack-webfont": "0.0.1-alpha.10", 
 +        "what-input": "^4.3.1" 
 +    }, 
 +    "devDependencies": {}
 } }
- 
 </code> </code>
  
webpack_complete_webdevelopment_config.txt · Last modified: 2018/02/05 23:48 by admin

Page Tools