shlomiassaf / webpack-dll-bundles-plugin Goto Github PK

A Webpack plugin for bundling group of packages as DLLs

License: MIT License

TypeScript 96.90% Shell 3.10%

webpack-dll-bundles-plugin's Introduction

Webpack Dll Bundle plugin

A Plugin for Webpack that uses Webpack's DllPlugin & DllReferencePlugin to create bundle configurations as part of the build process. The plugin will monitor for changes in packages and rebuild the bundles accordingly.

Example:

const webpackMerge = require('webpack-merge'); // used to merge webpack configs
const commonConfig = require('./webpack.common.js'); // the settings that are common 


  new DllBundlesPlugin({
    bundles: {
      polyfills: [
        'core-js',
        'zone.js',
      ],
      vendor: [
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        '@angular/core',
        '@angular/common',
        '@angular/forms',
        '@angular/http',
        '@angular/router',
        '@angularclass/hmr',
        'rxjs',
      ]
    },
    dllDir: './dll',
    webpackConfig: webpackMerge(commonConfig({env: ENV}), {
      devtool: 'cheap-module-source-map',
      plugins: [] // DllBundlesPlugin will set the DllPlugin here
    })
  })

webpackConfig Accepts a path (string), webpack config object or webpack config object factory.
DllBundlesPlugin will override the entry and add the DllPlugins requires.
DllBundlesPlugin will also add the DllReferencePlugin to the webpack configuration it is defined on.

Referencing Dll files

Currently, the file name templates for dll's is locked, you can get a projected file name for a dll using the resolveFile function.

  new AddAssetHtmlPlugin([
    { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`) },
    { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('vendor')}`) }
  ])

TODO

Watch files/package.json for changes and rebuild
Move package resolution to webpack (now using node require)
Allow setting the template for file names.
Documentation

webpack-dll-bundles-plugin's People

Contributors

Stargazers

Watchers

Forkers

th0r amilajack genuifx tevix ankit coursera nmeghraj cashlalala madeleinecodes theandrewlane kodysmith

webpack-dll-bundles-plugin's Issues

[question] adding separate files into ddls

I want to add few files I use to ddls, for example:

  [50] ./~/core-js/es6/array.js 944 bytes {3} [built]
  [51] ./~/core-js/es6/date.js 231 bytes {3} [built]
  [52] ./~/core-js/es6/function.js 185 bytes {3} [built]
  [53] ./~/core-js/es6/map.js 207 bytes {3} [built]
  [54] ./~/core-js/es6/math.js 690 bytes {3} [built]
  [55] ./~/core-js/es6/number.js 602 bytes {3} [built]
  [56] ./~/core-js/es6/object.js 881 bytes {3} [built]
  [57] ./~/core-js/es6/parse-float.js 95 bytes {3} [built]
  [58] ./~/core-js/es6/parse-int.js 91 bytes {3} [built]
  [59] ./~/core-js/es6/reflect.js 717 bytes {3} [built]
  [60] ./~/core-js/es6/regexp.js 345 bytes {3} [built]
  [61] ./~/core-js/es6/set.js 207 bytes {3} [built]
  [62] ./~/core-js/es6/string.js 1.13 kB {3} [built]
  [63] ./~/core-js/es6/symbol.js 130 bytes {3} [built]
  [64] ./~/core-js/es6/typed.js 596 bytes {3} [built]
  [65] ./~/core-js/es6/weak-map.js 175 bytes {3} [built]
  [66] ./~/core-js/es6/weak-set.js 173 bytes {3} [built]

Right now, I've added

polyfills: [
   'core-js',
]

but I don't know how to add core-js/es6. I think I've tried every combination. Each trial ends with something like:

DLL: Checking if DLLs are valid.
Error: Package name mismatch, Expected core-js/es6 but found core-js 
    at webapp/node_modules/src/DllBundlesControl.ts:126:21
    at process._tickCallback (internal/process/next_tick.js:103:7)
    at Module.runMain (module.js:607:11)
    at run (bootstrap_node.js:420:7)
    at startup (bootstrap_node.js:139:9)
    at bootstrap_node.js:535:3

I could do it when I was using just ddl plugin.
Is there a way to include separate files into bundle?

Real project sample

Hi,
Does this fix the need to have 2 compilations, or does it split your config into multiple configs with dllref and dll... ?

Anyway a real example including all files like package.json.. will be great.

upgrade to v4+

DllBundlesPluging will be adapted to webpack v4+?

Lazy loading chunks not emitted when using DllBundlesPlugin

When using this plugin, it will not emit lazy loaded modules as chunks. When I disable this plugin in the webpack config plugins: [] array, then immediately my lazy loaded modules are emitted as chunks. When I re-enable this plugin, the chunks do not get emitted.

plugin config

 new DllBundlesPlugin({
         bundles: {
            polyfills: [
               'core-js',
               'ts-helpers',
               'zone.js'
            ],
            vendors: [
               '@angular/platform-browser',
               '@angular/platform-browser-dynamic',
               '@angular/core',
               '@angular/common',
               '@angular/forms',
               '@angular/http',
               '@angular/router',
               '@angularclass/hmr',
               'rxjs',
               'jwt-decode'
            ]
         },
         dllDir: helpers.root(outputDir + '/dlls'),
         // bundleExtension: '.dll.bundle.js',
         sourceMapFilename: '/maps/[name].map',
         chunkFilename: '/chunks/[name].chunk.js',

         webpackConfig: webpackMergeDll(commonConfig, {
            devtool: 'cheap-module-source-map',
            plugins: [ // These plugins are for the DLL build only, will not be used in dev or production builds.

               new OptimizeJsPlugin({
                  sourceMap: false // prod
               }),

               new UglifyJsPlugin({
                  // DLLS is build in "Production" mode always, since it is not code I will be debugging (that's why its in the DLL bundle anyway)

                  // "Production" mode options
                  beautify: false,
                  comments: false,
                  compress: { //prod
                     screw_ie8: true,
                     warnings: false,
                     conditionals: true,
                     unused: true,
                     comparisons: true,
                     sequences: true,
                     dead_code: true,
                     evaluate: true,
                     if_return: true,
                     join_vars: true,
                     negate_iife: false, // we need this for lazy v8
                     keep_fnames: false
                  },
                  mangle: { //prod
                     screw_ie8: true,
                     keep_fnames: false
                  },
               }),

               new ExtractTextPlugin({
                  filename: '/css/[name].style.css?[hash]',
                  disable: false,
                  allChunks: true
               }),

               // new webpack.DllPlugin({
               //    // The path to the manifest file which maps between
               //    // modules included in a bundle and the internal IDs
               //    // within that bundle
               //    path: helpers.root(outputDir + '/dlls/[name]-manifest.json'),
               //
               //    // The name of the global variable which the library's
               //    // require function has been assigned to. This must match the
               //    // output.library option above
               //    name: '[name]_lib'
               //
               // }),

               new webpack.optimize.CommonsChunkPlugin({
                  name: ['polyfills', 'vendors'].reverse()
               }),

               new CompressionPlugin({
                  asset: "[path].gz",
                  test: /\.(css|html|js|json|map)(\?{0}(?=\?|$))/,
                  threshold: 2 * 1024,
                  algorithm: "gzip",
                  minRatio: 0.8
               })
            ]
         })
      }),

App routes

export const ROUTES: Routes = [{
   path: '',
   redirectTo: 'sub',
   pathMatch: 'full',
}, {
   path: 'sub',
   loadChildren: '../+sub/sub.module#SubModule',
   // canActivate: [RouteProtection]
},
{
   path: 'login',
   component: LoginComponent
}, 
];

How to get rid of errors when you compile?

webpack.config.js

const path = require('path');
const webpack = require("webpack");
const LoaderOptionsPlugin = webpack.LoaderOptionsPlugin;
const CommonsChunkPlugin = webpack.CommonsChunkPlugin;
const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin;
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');


const create = () => ({
  context: path.join(__dirname, 'src'),
  entry: {
    index: './index.ts',
  },
  output: {
    path: path.join(__dirname, 'dest'),
    filename: '[name].bundle.js',
    publicPath: '/', 
  },
  resolve: {
      extensions: [".ts", ".js", ".json"],
      modules: ["node_modules"],
      alias: {
      }
  },
  externals: {
    
  },
  module: {
    rules: [
      {
        test: /\.ts?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      },
      {
          test: /\.html$/,
          use: 'raw-loader',
          exclude: [path.join(__dirname, 'src', 'index.html')]
        }
    ]
  },
  devtool: "nosources-source-map",
  plugins: [
    
    new DllBundlesPlugin({
    bundles: {
      vendor: [
        'rxjs',
      ]
    },
    dllDir: './dll',
    webpackConfig: {
      devtool: 'cheap-module-source-map',
      plugins: []
    }
  }),
  new AddAssetHtmlPlugin([
    { filepath: path.join(__dirname, 'dll',  DllBundlesPlugin.resolveFile('vendor'))},
  ]),
  new HtmlWebpackPlugin(),
  ],
  
  devServer: {
    contentBase: path.resolve(__dirname, 'src'),
  },
});

module.exports = create();

index.ts

import {Observable} from 'rxjs';

console.log(Observable);

npm start

"start": "webpack-dev-server --host $IP --port $PORT --hot --inline"

Run server, open application in the browser. Output to the console function Observable(observer) {...} but when compiling error -

ERROR in ./src/index.ts
(4,26): error TS2307: Cannot find module 'rxjs'.

Webpack HMR continuous rebuilding

When using this plugin to create separate dll for vendor libs I find out that certain type of files or even code paths break webpack HMR, it starts infinitely rebuilding and log notifications into console log, so my console window became spammed very quickly. First it happens when I add an image and just serve it as in html. For some reason this plugin didn't like my image, ok I've changed to another then spam finished. But next time when I add nested lazy routes into my app it breaks HMR again, this time I have no choice just switch HMR off which is very sadly. It works with 1 level of lazy routes, but as soon as you add nested it breaks immediately (infinite rebuilding). When I remove DllBundlePlugin out of dev config problems gone, but then I get huge main.js...
Could this be fixed? Or maybe somebody know some workaround?

devtool: 'eval' causes vendor.dll.js.map error

webpack: v2.2.0
webpack-dev-server: v2.3.0
webpack-dll-bundles-plugin: v1.0.0-beta.5

error:

ERROR in   Error: HtmlWebpackPlugin: could not load file .../dll/vendor.dll.js.map
  
  - index.js:313 
    [rr-frontend]/[html-webpack-plugin]/index.js:313:27
  
  - util.js:16 tryCatcher
    [rr-frontend]/[html-webpack-plugin]/[bluebird]/js/release/util.js:16:23
  
  - promise.js:510 Promise._settlePromiseFromHandler
    [rr-frontend]/[html-webpack-plugin]/[bluebird]/js/release/promise.js:510:31
  
  - promise.js:567 Promise._settlePromise
    [rr-frontend]/[html-webpack-plugin]/[bluebird]/js/release/promise.js:567:18
  
  - promise.js:612 Promise._settlePromise0
    [rr-frontend]/[html-webpack-plugin]/[bluebird]/js/release/promise.js:612:10
  
  - promise.js:687 Promise._settlePromises
    [rr-frontend]/[html-webpack-plugin]/[bluebird]/js/release/promise.js:687:18
  
  - async.js:133 Async._drainQueue
    [rr-frontend]/[html-webpack-plugin]/[bluebird]/js/release/async.js:133:16
  
  - async.js:143 Async._drainQueues
    [rr-frontend]/[html-webpack-plugin]/[bluebird]/js/release/async.js:143:10
  
  - async.js:17 Immediate.Async.drainQueues
    [rr-frontend]/[html-webpack-plugin]/[bluebird]/js/release/async.js:17:14

no errors when I change devtool to 'sourcemap' or 'cheap-module-source-map',

DLL libs not excluded from main bundle

Thanks for the amazing work on this!

At my company we have a build system which is based off AngularClass/angular2-webpack-starter. I've pulled in the latest changes which incorporate this plugin. When I run it I am seeing that the Angular is included in both the main bundle and the DLL bundle. I expect the libraries in the DLL bundle to be excluded from the main bundle.

The main difference in our build system implementation is that it is packaged as an internal NPM lib and included in our projects as a devDependency. I'm wondering if something with this approach could be causing this issue. Any thoughts?

context

I think I saw your beta 3. It should be this.options.webpackConfig.context instead.
and add ! at

if (!this.options.context) {
            this.options.webpackConfig.context = process.cwd();
 }

Great work , btw

Cannot use @types/leaflet

I am trying to use https://github.com/Asymmetrik/ngx-leaflet
I installed all the dependency packages but I encounter this error:

DLL: Checking if DLLs are valid.
{ Error: Cannot find module '@types/leaflet'
    at Function.Module._resolveFilename (module.js:489:15)
    at Function.resolve (internal/module.js:18:19)
    at DllBundlesControl.getPackageJsonPath (/Users/personal/code/udoma/webapp/node_modules/src/DllBundlesControl.ts:237:39)
    at DllBundlesControl.getPackageJson (/Users/personal/code/udoma/webapp/node_modules/src/DllBundlesControl.ts:224:32)
    at /Users/personal/code/udoma/webapp/node_modules/src/DllBundlesControl.ts:122:21
    at Array.map (<anonymous>)
    at DllBundlesControl.getMetadata (/Users/personal/code/udoma/webapp/node_modules/src/DllBundlesControl.ts:121:8)
    at DllBundlesControl.analyzeState (/Users/personal/code/udoma/webapp/node_modules/src/DllBundlesControl.ts:144:17)
    at DllBundlesControl.checkBundles (/Users/personal/code/udoma/webapp/node_modules/src/DllBundlesControl.ts:50:17)
    at DllBundlesPlugin.run (/Users/personal/code/udoma/webapp/node_modules/src/DllBundlesPlugin.ts:38:24)
    at Compiler.<anonymous> (/Users/personal/code/udoma/webapp/node_modules/src/DllBundlesPlugin.ts:31:53)
    at next (/Users/personal/code/udoma/webapp/node_modules/tapable/lib/Tapable.js:204:14)
    at Compiler.<anonymous> (/Users/personal/code/udoma/webapp/node_modules/awesome-typescript-loader/src/watch-mode.ts:7:13)
    at Compiler.applyPluginsAsyncSeries (/Users/personal/code/udoma/webapp/node_modules/tapable/lib/Tapable.js:206:13)
    at applyPluginsAsync.err (/Users/personal/code/udoma/webapp/node_modules/webpack/lib/Compiler.js:277:9)
    at next (/Users/personal/code/udoma/webapp/node_modules/tapable/lib/Tapable.js:202:11) code: 'MODULE_NOT_FOUND' }
Error: Error: DllBundlesPlugin: Some packages have errors.

The package @types/leaflet is installed properly and everything is in the folder

How to specify bundle name in DLLs?

How do we set the template for the bundle name?

I see it on the todo list, I'm wondering when this feature might make it in the next release? And if you can give any tips on what needs to be done, perhaps one of us can assist you with a PR. Thanks

Can't work with alias in webpack cofiguration

I use this plugin to build vue application, it's awesome.
but when i set the alias options in webpack , Dllplugin can not recommend it. it will take two version of vue, that is terrible.

my configuration:

{
    // some other configs
    plugins: [
        new DllBundlesPlugin({
            bundles: { vendor: [''vue"] }
        }),
        //... other plugins
    ],
    resolve:{
        alias:{
            'vue$': 'vue/dist/vue.common.js'
        }
    }
}

hope someone to help

Add repository field to package.json

Please add repository field to package.json so those who find this package within NPM can navigate to the repo to submit issues/prs.

"repository": {
    "type": "git",
    "url": "https://github.com/shlomiassaf/webpack-dll-bundles-plugin.git"
  },
  "bugs": {
    "url": "https://github.com/shlomiassaf/webpack-dll-bundles-plugin/issues"
  },

whenever file changes, dll bundling is running

whenever file changes, dll seems start over again in [email protected]

Issues with webpack-dev-middleware and couple of questions?

I am trying to replace native DLL implementation in my project with your plugin. My project uses webpack-dev-middleware instead of dev server. static assets are served by .net web server instead.

Questions:

DLL bundles generated once are cached or they are generated each time we start the app in development mode?
Can we specify names of dll bundles e.g instead of polyfills.dll.js > polyfills.js?
I think I don't need assets plugin configured as:

 new AddAssetHtmlPlugin([
        { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`) },
        { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('vendor')}`) }
      ]),

In my scenario static files aren't dynamically injected. There is no index.html file I am using. In my case root file is index.cshtml (equivalent of index.html) which have static file reference already added.?

Issue:
4) I was putting 3rd party SCSS files like bootstrap, font awesome in DLL and was extracting to common styles.css file using extract text plugin. But DllBundlesPlugin is throwing exception for these files. Any idea how to handle them?

Add own source code to dll

Hello,
I need to add self source code contained in src/MyModule . to DLL
Is it possible?

Support [email protected]+

I am using the latest [email protected], and I'm consistently getting this error:

npm ERR! peer invalid: [email protected], required by [email protected]

Can you please make the peerDependencies more flexible?

Invalid config file resolution

Function referenced invalid this

see source

[Question] Use generated library bundles in multiple webpack configs

Hi! Thanks for a great plugin!

Here is my problem: we are migrating our app from ng1 to ng2 and have two webpack configs.
First one contains two bundles: app and vendor.
Second one has everything related to ng2 app (angular2, *.ts files and ng2 templates).

The thing is all vendor libs are located in the first config and ng2-config doesn't know anything about them but it should: it needs access at least to ng1.
One way to solve it is use webpack externals and export all this libs into global scope but I don't like it much.

So I decided to try your plugin but the thing is I need to share one instance of DllBundlesPlugin in two webpack configs.

What I do now is saving it into a variable (var dllBundlesPlugin = new DllBundlesPlugin(...)) and adding it as plugin into both configs.

So my question is is it the right way to use it because now I see duplicating logs DLL: Rebuilding..., DLL: Checking if DLLs are valid etc.

How this plugin handles such cases? Does it build dll bundle only once or two builds are being done in parallel?

Cannot find module 'primeng'

I'm trying to use primeng components wtih DllBundlesPlugin, but when I add 'primeng' into vendor bundle webpack compilation fails with this error:

DLL: Checking if DLLs are valid.
npm : { Error: Cannot find module 'primeng'
At line:1 char:1
+ npm run build:dev
+ ~~~~~~~~~~~~~~~~~
    + CategoryInfo          : NotSpecified: ({ Error: Cannot find module 'primeng':String) 
    [], RemoteException
    + FullyQualifiedErrorId : NativeCommandError
 
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.resolve (internal/module.js:27:19)
    at DllBundlesControl.getPackageJsonPath

My config is as follows:

    plugins: [
        new DllBundlesPlugin({
            bundles: {
                polyfills: [
                    'core-js',
                    {
                        name: 'zone.js',
                        path: 'zone.js/dist/zone.js'
                    },
                    {
                        name: 'zone.js',
                        path: 'zone.js/dist/long-stack-trace-zone.js'
                    }
                ],
                vendor: [
                    '@angular/platform-browser',
                    '@angular/platform-browser-dynamic',
                    '@angular/core',
                    '@angular/common',
                    '@angular/forms',
                    '@angular/http',
                    '@angular/router',
                    'primeng',
                    'rxjs',
                ]
            },
            dllDir: './wwwroot/dist',
            webpackConfig: webpackMerge(commonConfig, {
                devtool: 'cheap-module-source-map',
                plugins: []
            })
        })
    ]

I've also tried 'primeng/primeng', but then I get:
Error: Package name mismatch, Expected primeng/primeng but found primeng

So, is it possible somehow to use DllBundlesPlugin with PrimeNG ?