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
Last revisionBoth sides next revision
webpack_complete_webdevelopment_config [2018/02/05 21:17] – [Slide 5] adminwebpack_complete_webdevelopment_config [2018/02/05 23:46] – [Slide 3] admin
Line 26: Line 26:
     * Dependenies end up in ./node_modules/ :!:     * Dependenies 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