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
webpack_complete_webdevelopment_config [2018/01/29 23:00] adminwebpack_complete_webdevelopment_config [2018/02/05 23:48] (current) – [Slide 3] admin
Line 1: Line 1:
-~~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 ======
  
Line 12: Line 11:
     * Minify     * Minify
     * Compress     * Compress
- 
- 
   * Compile and process Javascript   * Compile and process Javascript
     * Babel (transpile to ES2015)     * Babel (transpile to ES2015)
Line 21: Line 18:
   * 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 =====
  
-===== Yarn Commands =====+  * Define "workspaces" to install packages recursively 
 +    * Workspace will be linked to ./node_modules/JoRo.Library (package.json -> "name"
 +    * Dependencies end up in ./node_modules/ :!: 
 +  * Centralize/unify build commands 
 +  * Compatible with NPM but creates a yarn.lock file 
 +  * Commands are slightly different than NPMs (e.g. yarn add packageName)
  
-<code bash> +<code bash Commands
-- development+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>
Line 39: Line 43:
 <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>
  
Line 109: Line 116:
  * @type string  * @type string
  */  */
-const corePluginBase = './Packages/Sites/JoRo.Library/Resources/Private/Library';+const corePluginBase = './node_modules/JoRo.Library/'; 
 +const corePluginTarget = './Packages/Sites/JoRo.Library/Resources/Public/';
  
 if (process.env.NODE_ENV === undefined) { if (process.env.NODE_ENV === undefined) {
Line 132: Line 140:
  */  */
 pluginConfig[0] = new ExtractTextPlugin({ pluginConfig[0] = new ExtractTextPlugin({
-    filename: '../../Public/Styles/app.css'+    filename: corePluginTarget + 'Styles/app.css'
 }); });
 const extractPlugin = pluginConfig[0]; const extractPlugin = pluginConfig[0];
  
 pluginConfig[8] = new ExtractTextPlugin({ pluginConfig[8] = new ExtractTextPlugin({
-    filename: '../../Public/Styles/kss.css'+    filename: corePluginTarget + 'Styles/kss.css'
 }); });
 const extractKssPlugin = pluginConfig[8]; const extractKssPlugin = pluginConfig[8];
Line 147: Line 155:
 pluginConfig[2] = new sassLintPlugin({ pluginConfig[2] = new sassLintPlugin({
     glob: './Scss/**/*.s?(a|c)ss',     glob: './Scss/**/*.s?(a|c)ss',
-    ignoreFiles: [path.resolve(__dirname, './Scss/_webfont.scss')],+    ignoreFiles: [path.resolve(corePluginBase, 'Scss/_webfont.scss')],
     ignorePlugins: ['extract-text-webpack-plugin']     ignorePlugins: ['extract-text-webpack-plugin']
 }); });
Line 160: Line 168:
     classNmw: 'icon',     classNmw: 'icon',
     cssFormat: 'template',     cssFormat: 'template',
-    template: path.resolve(__dirname, './Templates/Webfont.scss.njk'),+    template: path.resolve(corePluginBase, 'Templates/Webfont.scss.njk'),
     cssTemplateFontPath: '../Fonts/',     cssTemplateFontPath: '../Fonts/',
     dest: {     dest: {
-        fontsDir: '../../Public/Fonts/', +        fontsDir: corePluginTarget + 'Fonts/', 
-        stylesDir: path.resolve(__dirname, './Scss/'),+        stylesDir: path.resolve(corePluginBase, 'Scss/'),
         outputFilename: '_webfont.scss',         outputFilename: '_webfont.scss',
     }     }
Line 187: Line 195:
  */  */
 pluginConfig[6] = new KssWebpackPlugin({ pluginConfig[6] = new KssWebpackPlugin({
-    source: ['./Scss/', './Templates/Styleguide/kss-assets/'], +    source: [corePluginBase + 'Scss/', corePluginBase + 'Templates/Styleguide/kss-assets/'], 
-    destination: "../../Public/Styleguide", +    destination: corePluginTarget + "Styleguide", 
-    builder: './Templates/Styleguide/',+    builder: corePluginBase + 'Templates/Styleguide/',
     homepage: '../Templates/homepage.md',     homepage: '../Templates/homepage.md',
     title: "knallimall.org",     title: "knallimall.org",
     css: ['../Styles/app.css'],     css: ['../Styles/app.css'],
     js: ['../JavaScript/script.js'],     js: ['../JavaScript/script.js'],
-    custom: 'Icons', +    custom: ['Icons', 'Colorpicker']
-    extend: './Templates/Styleguide/helpers/'+    extend: corePluginBase + 'Templates/Styleguide/helpers/'
 }); });
  
Line 206: Line 214:
     files: [     files: [
         // Replace these globs with yours         // Replace these globs with yours
-        '../../Public/Styles/**/*.css', +        corePluginTarget + 'Styles/**/*.css', 
-        '../../Public/JavaScript/**/*.js'+        corePluginTarget + 'JavaScript/**/*.js'
     ]     ]
 }), }),
Line 251: Line 259:
                 includePaths: [                 includePaths: [
                     path.resolve('./node_modules/foundation-sites/scss'),                     path.resolve('./node_modules/foundation-sites/scss'),
-                    path.resolve('./scss')+                    path.resolve(corePluginBase + 'Scss')
                 ]                 ]
             }             }
Line 260: Line 268:
 module.exports = { module.exports = {
     entry: {     entry: {
-        script: ['./JavaScript/script.js'],+        script: [corePluginBase + 'JavaScript/script.js'],
     },     },
     output: {     output: {
         path: __dirname,         path: __dirname,
-        filename: "../../Public/JavaScript/script.js"+        filename: corePluginTarget + "JavaScript/script.js"
     },     },
     resolve: {     resolve: {
-        extensions: ['.js', '.jsx', '.json']+        extensions: ['.js', '.scss'], 
 +        modules: [ 
 +            path.resolve('./node_modules/'
 +        ],
     },     },
     watchOptions: {     watchOptions: {
-        ignored: ["Styleguide/**/*", "node_modules/**/*"]+        ignored: [ /Styleguide/, /node_modules/, /Data/, "/Web/"]
     },     },
     module: {     module: {
Line 305: Line 316:
     plugins: pluginConfig     plugins: pluginConfig
 }; };
- 
 </code> </code>
 +
 +===== The Good, the Bad ... =====
 +
 +  * **Yarn**
 +    * Workspaces
 +    * Smart caching (??)
 +    * Works flawlessly with existing package.json
 +  * **Webpack**:
 +    * Webpack lets you use require() on local "static assets," meaning non-Javascript files.
 +    * https://blog.andrewray.me/webpack-when-to-use-and-why/#thegood
webpack_complete_webdevelopment_config.1517263207.txt.gz · Last modified: 2018/01/29 23:00 by admin