Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision |
webpack_complete_webdevelopment_config [2018/01/29 23:00] – admin | webpack_complete_webdevelopment_config [2018/02/05 21:14] – [Slide 4] admin |
---|
~~REVEAL theme=dokuwiki&transition=convex&controls=1&show_progress_bar=1&build_all_lists=1&show_image_borders=0&horizontal_slide_level=2&enlarge_vertical_slide_headers=0&show_slide_details=1&open_in_new_window=1&size=1024x768~~ | ~~REVEAL dokuwiki~~ |
====== Webpack / Yarn Web Development Config ====== | ====== Webpack / Yarn Web Development Config ====== |
| |
* Minify | * Minify |
* Compress | * Compress |
| |
| |
* Compile and process Javascript | * Compile and process Javascript |
* Babel (transpile to ES2015) | * Babel (transpile to ES2015) |
* Generate KSS Styleguide | * Generate KSS Styleguide |
* Icons included | * Icons included |
* Using custom template (index.hbs, ) | * Using custom template (index.hbs, kss-assets/kss.scss) |
| |
===== Yarn Commands ===== | ===== Yarn ===== |
| |
<code bash> | * Define "workspaces" to install packages recursively |
- development | * Workspace will be linked to ./node_modules/JoRo.Library |
| * Dependenies end up in ./node_modules/ :!: |
| * Centralize/unify build commands |
| |
| <code bash Commands> |
| - development # Build assets for development |
webpack | webpack |
- livereload | - livereload # Run PHP Server and watch for changes |
FLOW_CONTEXT=Development/Livereload ../../../../../../flow server:run | webpack --watch | FLOW_CONTEXT=Development/Livereload ./flow server:run | webpack --watch |
- production | - production # Build assets for production |
NODE_ENV='production' webpack | NODE_ENV='production' webpack |
- watch | - watch # Watch for changes and build files accordingly |
webpack --watch | webpack --watch |
</code> | </code> |
<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> |
| |