niieani/webpack-dependency-suite

A set of Webpack plugins, loaders and utilities designed for advanced dependency resolution

NO LONGER MAINTAINED. PLEASE DO NOT USE OR FORK.

Webpack Dependency Suite

A set of loaders, plugins and utilities designed to help with adding custom dependencies to your project.

Usage

TODO.

Plugins

ConventionInvalidatePlugin

This plugin allows customisation of the modules that are invalidated as a result of a change to another module.

By default it will invalidate all modules that share the name as a changed module except for the extension, e.g. if ./index.js was changed and ./index.html was watched, then ./index.html would be invalidated and rebuild.

It is possible to pass in a function to implement a custom invalidation rule instead; the function will be given two arguments, an array of changed modules and an array of all watched modules and should return an array of additional modules which should be invalidated (which should not generally include the changed modules, as they will already be rebuild).

The plugin is used by adding it to the webpack config plugins, e.g.

const { ConventionInvalidatePlugin } = require('webpack-dependency-suite');

const config = {
  // rest of the config somewhere in here
  plugins: {
    // Default behaviour
    new ConventionInvalidatePlugin(),

    // Customised behaviour
    new ConventionInvalidatePlugin((changed, watched) => {
      return [/* list of additional invalidated modules */];
    }),
  },
};

Other Plugins

TODO

Parts of the Suite

require.include loaders

These are a bit like baggage-loader but more configurable and advanced.

• comment-include-loader:

    /* @import */ 'module'
    /* @import @lazy @ */ 'module'
    /* @import('thing\/*\/also\/works') @lazy @ */ 'module' // <<- globs will not work in comments cause of /**/ unless you escape slashes

• conventional-include-loader (include related files according to passed in function(fs)) [eg. like-named require loader for .html files]
• template require loader (and others - configurable?) ${} globbing by: - splitting path by '/' - find first component where * is - resolve previous one || contextDir - get all files recursively - split their paths '/' - add all that match the regex
• explicit loader: adds all dependencies listed in a JSON file to a given, individual file (entry?) expose a method to check if a path should override/add loaders by query configuration
• note: globbed paths MUST include extensions

Resolve Plugins

• resolve plugin for trying nested directories auto-resolve stuff (e.g. Aurelia's /dist/es2015)
• resolve plugin to use root module from node_modules if version range satisfied

Normal Use Plugins

• mapped relative moduleId plugin sets ModuleID: - use relative to any of config.modules (node_modules, app) - no JS extensions - rewrite paths for aurelia (strip /dist/node_modules/) - strip nested node_modules/.../node_modules - just do: package_name/request - for /index do package_name - name loader-based modules with a prefix: LOADER!NAME - aurelia loader checks cache for normal module name, then for async!NAME sets module.id relative to configured directory optionally keeps extension (.js .ts)

Development / Debugging

There are two scripts that are setup already:

• npm run dev

  • will run the same configuration instead with webpack-dev-server for live reload

• npm run build

  • will simply execute a webpack build in the repo

• npm run debug

  • will run the same build with node debugger.
  • paste provided link in Chrome (or Canary), and you will have the super incredible ChromeDevTools to step through your code for learning, exploration, and debugging.

Helpful resources:

• How to write a webpack loader
• How to write a plugin
• Webpack Plugin API
• webpack-sources
• enhanced-resolve

Recognition

The repository is based on the fantastic webpack-developer-kit by TheLarkInn, inspired by blacksonics.

webpack-dependency-suite's Issues

Splitting into smaller packages

I would like to use the RootMostResolvePlugin without installing the other dependencies that I don't need.

@niieani what do you think about splitting the modules into smaller packages? For example with independent repositories or something like lerna.

Problem with RootMostResolve in webpack-typescript aurelia skeleton

@niieani

Bazyli,

I am trying to use your dependency plugin, to resolve this issue:

aurelia/webpack-plugin#44 (comment)

I am getting these errors after adding the RootMostResolve plugin:

[at-loader] Checking finished with 4 errors
[at-loader] node_modules/webpack-dependency-suite/plugins/root-most-resolve-plugin.ts:1:1 
    Import assignment cannot be used when targeting ECMAScript 2015 modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead. 

[at-loader] node_modules/webpack-dependency-suite/utils/inject.ts:6:1 
    Import assignment cannot be used when targeting ECMAScript 2015 modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead. 

[at-loader] node_modules/webpack-dependency-suite/utils/inject.ts:7:1 
    Import assignment cannot be used when targeting ECMAScript 2015 modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead. 

[at-loader] node_modules/webpack-dependency-suite/utils/inject.ts:210:93 
    Property 'request' does not exist on type 'SimpleDependencyClass'. 

Do you have any advice?

I'm attaching my webpack config, which is a very slightly modified version of the webpack-typescript skeleton config.

Thanks,
Don

/// <reference path="./node_modules/@types/node/index.d.ts" />
/**
 * To learn more about how to use Easy Webpack
 * Take a look at the README here: https://github.com/easy-webpack/core
 **/
import { generateConfig, get, stripMetadata, EasyWebpackConfig } from '@easy-webpack/core';
import * as path from 'path';

import * as envProd from '@easy-webpack/config-env-production';
import * as envDev from '@easy-webpack/config-env-development';
import * as aurelia from '@easy-webpack/config-aurelia';
import * as typescript from '@easy-webpack/config-typescript';
import * as regenerator from '@easy-webpack/config-global-regenerator';

import * as html from '@easy-webpack/config-html';
import * as css from '@easy-webpack/config-css';
import * as fontAndImages from '@easy-webpack/config-fonts-and-images';
import * as globalBluebird from '@easy-webpack/config-global-bluebird';
import * as globalJquery from '@easy-webpack/config-global-jquery';
import * as generateIndexHtml from '@easy-webpack/config-generate-index-html';
import * as commonChunksOptimize from '@easy-webpack/config-common-chunks-simple';
import * as copyFiles from '@easy-webpack/config-copy-files';
import * as uglify from '@easy-webpack/config-uglify';
import * as generateCoverage from '@easy-webpack/config-test-coverage-istanbul';
import { RewriteModuleSubdirectoryPlugin, RootMostResolvePlugin, MappedModuleIdsPlugin, ConventionInvalidatePlugin, CommentLoaderOptions, ConventionOptions, HtmlRequireOptions, ListBasedRequireOptions, AddLoadersMethod } from 'webpack-dependency-suite';

const ENV: 'development' | 'production' | 'qa' = process.env.NODE_ENV && process.env.NODE_ENV.toLowerCase() || (process.env.NODE_ENV = 'development');
console.log('========== BUILDING FOR ENV - ' +  process.env.NODE_ENV + ' ==========');

const webpack = require('webpack');

//Determine if running locally in webpack-dev-server.
let args = JSON.parse(process.env.npm_config_argv);
let argv = Object.keys(args.cooked).map(function(key) {
 return args.cooked[key]}
);
const LOCAL = argv.indexOf('webpack-dev-server') >= 0;

// basic configuration:
const title = 'GridCommand';
const baseUrl = '/';
const rootDir = path.resolve();
const srcDir = path.resolve('src');
const outDir = path.resolve('dist');

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ExtractCustomCSS = new ExtractTextPlugin('style.[chunkhash].css');

const coreBundles = {
  bootstrap: [
    'aurelia-bootstrapper-webpack',
    'aurelia-polyfills',
    'aurelia-pal',
    'aurelia-pal-browser',
    'bluebird'
  ],
  // these will be included in the 'aurelia' bundle (except for the above bootstrap packages)
  aurelia: [
    'aurelia-bootstrapper-webpack',
    'aurelia-binding',
    'aurelia-dependency-injection',
    'aurelia-event-aggregator',
    'aurelia-framework',
    'aurelia-history',
    'aurelia-history-browser',
    'aurelia-loader',
    'aurelia-loader-webpack',
    'aurelia-logging',
    'aurelia-logging-console',
    'aurelia-metadata',
    'aurelia-pal',
    'aurelia-pal-browser',
    'aurelia-path',
    'aurelia-polyfills',
    'aurelia-route-recognizer',
    'aurelia-router',
    'aurelia-task-queue',
    'aurelia-templating',
    'aurelia-templating-binding',
    'aurelia-templating-router',
    'aurelia-templating-resources'
  ]
}

/**
 * Main Webpack Configuration
 */

// Use CSS source mapping only for DEV/QA.
let sourcemap = ENV === 'production'?'':'?sourceMap';
// The base/common config.
let config = generateConfig(
  {
    entry: {
      'app': ['./src/main' /* this is filled by the aurelia-webpack-plugin */],
      'aurelia-bootstrap': coreBundles.bootstrap,
      'aurelia': coreBundles.aurelia.filter(pkg => coreBundles.bootstrap.indexOf(pkg) === -1)
    },
    // Proxy config for the webpack devServer to use our special API proxying scheme.
    devServer: {
      proxy: {
        '/blgapi/**': {
          target: 'https://scig-dev.bluelinegrid.com',
          pathRewrite: {'^/blgapi' : ''},
          secure: true,
          changeOrigin: true,
          logLevel: 'info'
        }
      }
    },    
    output: {
      path: outDir,
    },
    module: {
      rules: [
        {
          test: /main.ts$/,
          loader: 'string-replace-loader',
          query: {
            search: '%RUNTIME_ENVIRONMENT%',
            replace: ENV,
            flags: 'ig'
          }
        },
        // Stylus loader.
        {
          test: /\.styl$/, loader: ExtractTextPlugin.extract(['css-loader'+sourcemap, 'stylus-loader?resolve url'])
        },
        // SASS loader.
        {
          test: /\.(scss|css)$/i, exclude: [srcDir+'/libs/'], loader: ExtractCustomCSS.extract(['css-loader'+sourcemap,'sass-loader'+sourcemap])
        },
{
   test: /favicon.ico$/,
   exclude: /node_modules/,
   loader:'file-loader?name=[name].[hash].[ext]&context=.'
}      
      ]
    },
    resolve: {
      plugins: [
      // removes duplicate submodules if the required SemVer is satisfied
      // preferring local ones (closest to rootDir)
      // useful especially when using linked modules
      new RootMostResolvePlugin(rootDir, true)
        
      ]
    },
    plugins: [
      new webpack.LoaderOptionsPlugin({
        test: /\.styl$/,
        stylus: {
          // You can have multiple stylus configs with other names and use them 
          // with `stylus-loader?config=otherConfig`. 
          default: {
            use: [require('nib')()],
          }
        },
      }),
      ExtractCustomCSS
    ]    
  },

  /**
   * Don't be afraid, you can put bits of standard Webpack configuration here
   * (or at the end, after the last parameter, so it won't get overwritten by the presets)
   * Because that's all easy-webpack configs are - snippets of premade, maintained configuration parts!
   * 
   * For Webpack docs, see: https://webpack.js.org/configuration/
   */
  // Use JS source mapping only for DEV/QA.
  ENV === 'qa' || ENV === 'development' ? 
    envDev(ENV !== 'qa' ? {} : {devtool: 'inline-source-map'}) :
    envProd({}),

  aurelia({root: rootDir, src: srcDir, title: title, baseUrl: baseUrl}),
  typescript(ENV !== 'qa' ? {} : { options: { doTypeCheck: false, sourceMap: false, inlineSourceMap: true, inlineSources: true } }),
  html(),
  // css({ filename: 'styles.css', allChunks: true, sourceMap: false }),
  fontAndImages(),
  globalBluebird(),
  globalJquery(),
  // Transpile to ES5-compatible JS output.  (Remove if not supporting IE11.)
  regenerator(),

  generateIndexHtml({minify: ENV === 'production'/*, overrideOptions:{favicon: 'favicon.ico'}*/}),

  commonChunksOptimize({appChunkName: 'app', firstChunk: 'aurelia-bootstrap'}),
  copyFiles({patterns: 
    [
      {context: './src/config', from: '**/**.json', to: 'config'},
  {context: './src/locales', from: '**/**.json', to: 'locales'},
      {from: './favicon.ico', to: 'favicon.ico' }
    ]
  }),
/* ENV === 'test' */
/*generateCoverage({ options: { esModules: true } })*/

  ENV === 'production' ?
    uglify({debug: false, mangle: { except: ['cb', '__webpack_require__'] }}) : {}
);

module.exports = stripMetadata(config);

Check also peerDependencies in RootMostResolvePlugin

RootMostResolvePlugin fails for packages where the dependency isn't listed in the dependencies block and when there is no dependencies block.

I have some packages in my lerna repo where react is listed as a peerDependency and for development purposes it's also listed as devDependency.

{
  "devDependencies": {
    "babel-cli": "^6.22.2",
    "babel-preset-es2017": "^6.22.0",
    "enzyme": "^2.7.1",
    "enzyme-to-json": "^1.5.0",
    "jest": "^19.0.2",
    "react": "^15.4.2",
    "react-addons-test-utils": "^15.4.2",
    "react-dom": "^15.4.2",
    "rimraf": "^2.5.4"
  },
  "peerDependencies": {
    "react": "^15.4.2"
  }
}

The plugin fails with something like Can not read 'react' of undefined.

Tasks to fix this:

• check if dependencies block exists and if the package is listed there
• when not, check if a peerDependencies block exists and if the package is listed there

Update to webpack 4

This should be updated to webpack 4

Example reason:

index.ts(26,55): error TS2339: Property 'rootContext' does not exist on type 'LoaderContext'.

An in-range update of @types/lodash is breaking the build 🚨

The dependency @types/lodash was updated from 4.14.116 to 4.14.117.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/lodash is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Missing enhanced resolve

hey there, neat set of tools. looks like you're missing enhanced-resolve in the package.json

Version 10 of node.js has been released

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

More information on this issue

Greenkeeper has checked the engines key in any package.json file, the .nvmrc file, and the .travis.yml file, if present.

• engines was only updated if it defined a single version, not a range.
• .nvmrc was updated to Node.js 10
• .travis.yml was only changed if there was a root-level node_js that didn’t already include Node.js 10, such as node or lts/*. In this case, the new version was appended to the list. We didn’t touch job or matrix configurations because these tend to be quite specific and complex, and it’s difficult to infer what the intentions were.

For many simpler .travis.yml configurations, this PR should suffice as-is, but depending on what you’re doing it may require additional work or may not be applicable at all. We’re also aware that you may have good reasons to not update to Node.js 10, which is why this was sent as an issue and not a pull request. Feel free to delete it without comment, I’m a humble robot and won’t feel rejected 🤖

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Globbing implementation

The globbing implementation in expandGlobBase is incorrect.
I am not sure why you didn't use the glob module directly?
It would reduce your code, be correct and support the full glob grammar.

Anyway, the most important problem in expandGlobBase is that it doesn't match /**/ for direct children.
This is caused by your successive regexes that will turn pattern /**/ into the regex [\\/]+\.*?[\\/]+. Notice how this cannot be smaller than //, which is not what an empty path looks like.

Globbing in comment-loader

Globbing doesn't work in comment only imports, like /* @import('*.ts') */.
Reason is that the Regex doesn't match *.
You should change the Regex on line 90

// now
/^@import\([\'"`]*([- \./\w]+)['"`]\)* *(@lazy)? *(?:@chunk\(['"`]*([\w-]+)['"`]*\))? *(@lazy)?$/
// fixed
/^@import\([\'"`]*([- \./\w*]+)['"`]\)* *(@lazy)? *(?:@chunk\(['"`]*([\w-]+)['"`]*\))? *(@lazy)?$/
                           ^

It then works for me.
Other parts of this regex look strange to me, like the star after import's opening quote or closing bracket.

After globbing, the next step is resolving paths and it fails on Windows, because the absolute paths of matching files use \. I had to fix it by replacing every \ with a /.

resourceData.forEach(r => r.literal = r.literal.replace(/\\/g, "/"));