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
webpack_complete_webdevelopment_config [2018/02/05 21:16] – [Slide 3] adminwebpack_complete_webdevelopment_config [2018/02/05 23:48] (current) – [Slide 3] admin
Line 24: Line 24:
   * Define "workspaces" to install packages recursively   * Define "workspaces" to install packages recursively
     * Workspace will be linked to ./node_modules/JoRo.Library (package.json -> "name")     * Workspace will be linked to ./node_modules/JoRo.Library (package.json -> "name")
-    * Dependenies end up in ./node_modules/ :!:+    * Dependencies end up in ./node_modules/ :!:
   * Centralize/unify build commands   * 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 Commands> <code bash Commands>
Line 114: 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 137: 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 152: 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 165: 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 192: 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 211: 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 256: 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 265: 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 310: 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.txt · Last modified: 2018/02/05 23:48 by admin

Page Tools