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:17] – [Slide 5] 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/'; const corePluginTarget = './Packages/Sites/JoRo.Library/Resources/Public/';
  
Line 169: Line 171:
     cssTemplateFontPath: '../Fonts/',     cssTemplateFontPath: '../Fonts/',
     dest: {     dest: {
-        fontsDir: corePluginBase + 'Public/Fonts/',+        fontsDir: corePluginTarget + 'Fonts/',
         stylesDir: path.resolve(corePluginBase, 'Scss/'),         stylesDir: path.resolve(corePluginBase, 'Scss/'),
         outputFilename: '_webfont.scss',         outputFilename: '_webfont.scss',
Line 266: Line 268:
 module.exports = { module.exports = {
     entry: {     entry: {
-        script: [corePluginTarget + 'JavaScript/script.js'],+        script: [corePluginBase + 'JavaScript/script.js'],
     },     },
     output: {     output: {
Line 273: Line 275:
     },     },
     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 311: 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