asfktz / autodll-webpack-plugin Goto Github PK

I use HotModuleReplacementPlugin and ModuleConcatenationPlugin.
If change code then I got error in console like:
Uncaught TypeError: Cannot read property 'create' of undefined and other undefined.
These errors gone if disable ModuleConcatenationPlugin

What do you think of formatting the codebase using prettier and adding a precommit hook to format the code? Here is the prettier config list I like to use in projects, tell me what you think about it:

• printWidth: 100
• tabWidth: 2
• useTabs: false
• semi: true
• singleQuote: true
• trailingComma: es5 (or 'all' if you want)
• bracketSpacing: true

Some of these options are prettier defaults but I listed them anyway for clarity sake.

If you are ok with it, I'll a PR to make this work.

Before finding your plugin, I tried to implement the DLL plugin myself in my projects. I thought that it would be cumbersome for my team to have to manually update the list of dependencies every time they install a dep. Plus I'm sure every now and then we would simply forget to update it. I then created a script that runs on NPM prestart hook and that would check the dependencies list in the package.json against a cached version and rebuilding the dependencies list if needed. I also added a dllIgnore field in the package.json in order to ignore package that do not need to be in the DLL (bootstrap, non-js stuff etc.).

What do you think of adding such an automation to this plugin (if possible)? It would be toggle with a new setting i.e auto: true which would be false by default. If you are ok with it, I'd be happy to make a PR for it.

Thanks for your great plugin.

I am currently using https://github.com/shlomiassaf/webpack-dll-bundles-plugin which looks for changes to package.json in node modules to recompile the dlls, which is really useful if the node module gets updated.

With that plugin, I am also doing a hack, where I have added a package.json to local code in order to pull out local library code (until it is moved out into its own npm package).

I was wondering if it would be possible for this plugin to:

• Watch package.json of node modules to invalidate the dll cache
• Watch changes to any files referenced in the dll to invalidate the cache

new AutoDllPlugin({
      debug: true,
      filename: '[name].dll.bundle.js',
      entry: {
        'citizen.sp': ['react', 'react-dom'],
      },
    }),

Syntax error occurs when displayed in browser.

var citizen.sp_9ef666324acb1112a62e =
// ↑Because there are dots in the variable name

My server side rendering webpack config is below. When created vue-ssr-server-bundle.json, it doesn't use dll vendor file.
When I commented out the VueSSRServerPlugin, it seems work fine. I believe there's a conflict with VueSSRServerPlugin, would any one check it? Thx.
PS. use original dll plugin, it works as expected.

module.exports = merge(baseConfig, {
  target: 'node',
  output: {
    libraryTarget: 'commonjs2'
  },
  externals: nodeExternals({
    // do not externalize CSS files in case we need to import it from a dep
    whitelist: /\.css$/
  }),
  plugins: [
    new AutoDllPlugin({
      debug: true,
      inject: false,
      filename: 'server.dll.[hash].js',
      context: PATH.ROOT,
      entry: {
        vendor: [
          'vue',
          'vue-router'
        ]
      }
    }),
    new webpack.DefinePlugin({
      'process.env.VUE_ENV': '"server"'
    }),
    new VueSSRServerPlugin()
  ]
})

to ease new contributors

We use https://github.com/danethurber/webpack-manifest-plugin to output a JSON manifest of source filenames to output filenames, which our application then uses to write the <script> and <link> tags, and other references to Webpack-compiled assets into our server-side HTML templates.

Using the manual setup for DllPlugin, this meant we were producing two JSON manifest files: one for the DLL build, and one for the main build.

With autodll-webpack-plugin, I can see the JSON manifest file generated by webpack-manifest-plugin for the DLL build gets written to the cache directory (along with the JavaScript bundle and the DllPlugin manifest file), but that file doesn't make it into the final Webpack output; only the JSON manifest file generated by webpack-manifest-plugin for the main build is output.

Since the file is sitting there in the cache directory, I'm hoping there is some easy way to support plugins that generate additional assets on output.

plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './src/index.html',
    }),
    new AutoDllPlugin({
      debug: true,
      inject: true,
      filename: '[name]_[hash].js',
      path: './dll',
      entry: {
        vendor: [
          'react',
          'react-dom',
          'moment'
        ]
      }
    })
  ]

Should create an instance cache dir named: development_instance_0_73245b0499068c0b1433cfcfc30202b8

But we get instead: development_instance_1_73245b0499068c0b1433cfcfc30202b8

Without HtmlWebpackPlugin we get the correct index

https://github.com/asfktz/autodll-webpack-plugin/blob/master/src/plugin.js#L107

settings.publicPath could be something like https://xxxx.com
If using path.join, the https://xxxx.com would become https:/xxx.com which is incorrect.

Hey, this looks like pretty great.

I just started trying to integrate this with Next.js. (We've a pretty complex webpack config)
Specially we use the "common chunks plugin".

When I use this as mentioned in the recommend way, I got react and react-dom in the vendor.js. But it's also in the commons.jsas well.

This is my code: vercel/next.js#2433

Is there anything else I've to do here.

I have this error:

    at MemoryFileSystem.writeFileSync (/Users/clementloridan/Workspace/Braineet/agora/node_modules/memory-fs/lib/MemoryFileSystem.js:207:10)
    at /Users/clementloridan/Workspace/Braineet/agora/node_modules/autodll-webpack-plugin/lib/createMemory.js:62:11
    at runCallback (timers.js:651:20)
    at tryOnImmediate (timers.js:624:5)
    at processImmediate [as _immediateCallback] (timers.js:596:5)
From previous event:
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:437:3)
  code: 'ENOENT',
  errno: 34,
  message: 'no such file or directory',
  path: '/assets/js/vendor.js' }

HTML Webpack Template requires setting html-webpack-plugin's inject option to false, so when I do

    plugins: [
        new HtmlWebpackPlugin({
            template: HtmlWebpackTemplate,
            inject: false
        }),
        new AutoDllWebpackPlugin({
            inject: true,
            entry: {
                vendor: [
                    "react"
                ]
            }
        })
    ]

the generated index.html is missing the <script> tag for vendor.js.

I don't think this plugin is ever looking at the stats returned from the DLL compilation. It should probably add warnings and failures from the DLL compilation to the main compilation. In addition, it shouldn't cache the output from a DLL compilation that had errors.

Here is my webpack.config.js.

const path = require("path");

const HtmlPlugin = require("html-webpack-plugin");
const AutodllPlugin = require("autodll-webpack-plugin");

module.exports = {
  context: path.resolve(__dirname, "src"),
  entry: {
    index: "./index.js"
  },
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "[name].js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "babel-loader"
      },
      {
        test: /pixi-layers/,
        use: {
          loader: "imports-loader",
          options: "PIXI=pixi.js"
        }
      }
    ]
  },
  plugins: [
    new HtmlPlugin({
      template: "index.ejs"
    }),
    new AutodllPlugin({
      inject: true,
      filename: "[name].[hash].js",
      entry: {
        vendor: ["pixi-layers", "pixi.js"]
      }
    })
  ]
};

Since pixi-layers use a global PIXI, I use imports-loader to add a PIXI import for pixi-layers. This makes pixi-layers work.

But after using autodll-webpack-plugin, imports-loader takes no effect, and pixi-layers raise an error Uncaught ReferenceError: PIXI is not defined.

See my demo: webpack-demo.zip

Right now, bluebird is being used mainly for promisifying callback-style functions. Wouldn't it be better to use a lighter, more focused module like pify for this? Bluebird.join is also used but that can be achieved using Promise.all as suggested here.

when i set the publicPath without http or https, just like //s.bar.com/public,
path.join will make the final script tag src starts with /s.bar.com/public ,

https://github.com/asfktz/autodll-webpack-plugin/blob/v0.2.1/src/paths.js#L12

The path:

http://dll/vendors.de52e9e4.js net::ERR_NAME_NOT_RESOLVED

if visit the path currently

http://localhost:9001/dll/vendors.de52e9e4.js

my webpack pack js config

// Webpack [JS]

// * use to pack minify Javascript
// * babel to preset ES6 => ES5
// * Optimize with CommonsChunkPlugin()
// * minify Javascript

// @exports [rules]
// @exports [plugins]
'use strict';

const ISDEV = process.env.NODE_ENV === 'development';

const webpack = require('webpack');
const HappyPack = require('happypack');
const HappyThreadPool = HappyPack.ThreadPool({ size: 8 });

const path = require('./pack.path');
const config = require('./pack.config');
const rpath = require('path');
const resolve = rpath.resolve;

const BabiliPlugin = require('babili-webpack-plugin');
const AutoDLLPlugin = require('autodll-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const NpmInstallPlugin = require('npm-install-webpack-plugin');
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
// const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');

const PRDTASK = ISDEV ? [
	new webpack.NoEmitOnErrorsPlugin(),
	new webpack.HotModuleReplacementPlugin(),
	new webpack.NamedModulesPlugin(),
	// fast building with AutoDllPlugin
	new AutoDLLPlugin({
		inject: true,
		debug: ISDEV,
		filename: '[name].[hash:8].js',
		path: 'dll',
		entry: {
			vendors : config.vendors
		}
	})
	// new FriendlyErrorsPlugin()
	// new InterpolateHtmlPlugin()
] : [
	// Generate a manifest file which contains a mapping of all asset filenames
	// to their corresponding output file so that tools can pick it up without
	// having to parse `index.html`.
	new BabiliPlugin(),

	new webpack.LoaderOptionsPlugin({
		minimize: true,
		debug: false
	}),
	new webpack.optimize.MinChunkSizePlugin({
		minChunkSize: 10240
	}),
	new webpack.optimize.CommonsChunkPlugin({
		name: config.commonChunkName,
		chunks: path.chunks,
		filename: 'common/[name].[hash:8].js',
		minChunks: function(module){
			return module.context && (
						module.context.indexOf('node_modules') !== -1 ||
						module.context.indexOf('dist/common') !== -1 ||
						module.context.indexOf('dist/style') !== -1);
		}
	}),
	new webpack.optimize.AggressiveMergingPlugin(),
	new webpack.optimize.OccurrenceOrderPlugin(),
	new webpack.optimize.ModuleConcatenationPlugin(),
	new ParallelUglifyPlugin({
		test: /.(js|jsx)$/,
		exclude: /node_modules/,
		cacheDir: "./node_modules/.cache/",
		workerCount: 6,
		sourceMap: false,
		uglifyJS: {
			compress: {
				unsafe: true,
				warnings: false,
				hoist_vars: true,
				drop_console: true,
				collapse_vars: true,
				reduce_vars: true
			},
			sourceMap: false,
			mangle: false
		},
	})
	// new webpack.optimize.UglifyJsPlugin({
	// 	compress: {
	// 		unsafe: true,
	// 		warnings: false,
	// 		hoist_vars: true,
	// 		drop_console: true,
	// 		collapse_vars: true,
			// reduce_vars: true
	// 	},
	// 	beautify: false,
	// 	comments: false,
	// 	sourceMap: false,
	// 	mangle: false
	// }),
];

module.exports = {
	rules: [
		{
			test: /\.(js|jsx)$/,
			use: 'happypack/loader?id=jsx',
			exclude: /node_modules/,
		},

		// {
		// 	test: /\.(js|jsx)$/,
		// 	exclude: /node_modules|assets/,
		// 	use: (ISDEV ? [{ loader: "react-hot-loader/webpack" }] : []).concat([
		// 		{
		// 			loader: "babel-loader",
		// 			options: {
		// 				babelrc: false,
		// 				presets: ["es2015","react"],
		// 				plugins: ISDEV ?
		// 				['transform-runtime','transform-class-properties','transform-function-bind','transform-do-expressions'] :
		// 				['transform-class-properties','transform-function-bind','transform-do-expressions'],
		// 				compact: true,
		// 				cacheDirectory: true
		// 			},
		// 		}
		// 	]),
		// },

		// doom template to module
		{
			test: /\.doom$/,
			use: 'happypack/loader?id=doom',
			exclude: /node_modules/
		},
	],

	plugins: [
		new HappyPack({
			id: "jsx",
			threadPool: HappyThreadPool,
			loaders: [
				{
					loader: 'cache-loader',
					query: {
						cacheDirectory: path.cache
					}
				},
				{
					loader: 'babel-loader',
					query: {
						babelrc: false,
						presets: ["es2015","react"],
						plugins: ISDEV ?
						['transform-runtime','transform-class-properties','transform-function-bind','transform-do-expressions'] :
						['transform-class-properties','transform-function-bind','transform-do-expressions'],
						compact: true,
						cacheDirectory: true
					}
				}
			]
		}),
		new HappyPack({ id: "doom", loaders: ['raw-loader'] }),
		// new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn|en-gb/),
		new ManifestPlugin({ fileName: 'manifest.json' }),
		new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
		new webpack.DefinePlugin(config.defined),
		new webpack.ProvidePlugin(config.provide),

		new NpmInstallPlugin(),
		new WatchMissingNodeModulesPlugin(resolve('node_modules')),
		new CaseSensitivePathsPlugin(),
	].concat(PRDTASK)
};

Currently, the conditions for cache invalidation are:

1. npm install / npm remove
2. The plugin's settings are different from the last build.

As discussed in facebook/create-react-app#2710
Adding a watch functionality might be useful.

For examples, if someone adds a 'console.log()' in one of the node_modules, it will trigger a new build.

And write tests for it.

This is beneficial to find regression / developing a new feature.

Right now we only have spec for the units but not for the use cases

What does this plugin do that webpack-dll-bundles-plugin doesn't?

Looking at the two plugins, they are very similar.

Hello! Your plugin is awesome for development. I'm also trying to use it for production builds, but minification does not work.

This is my environment:

➜  ~ node -v
v8.1.2
➜  ~ npm -v
5.3.0

This is my webpack config:

const path = require('path');

const _ = require('lodash');
const webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');
const AutoDllPlugin = require('autodll-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const CleanPlugin = require('clean-webpack-plugin');

//noinspection JSUnresolvedVariable
const NODE_ENV = process.env.NODE_ENV;

if (NODE_ENV !== 'development' && NODE_ENV !== 'production') {
  console.error('Please, provide correct NODE_ENV environment variable');
  process.exit(1);
}

const SRC_PATH = path.resolve('src');
const BUILD_PATH = path.resolve('build');

const packageJson = require('./package.json');
const vendors = Object.keys(packageJson.dependencies).filter(dep => !dep.startsWith('@types/'));

const isDev = (yes, no) => NODE_ENV === 'development' ? yes : no;
const isProd = (yes, no) => NODE_ENV === 'production' ? yes : no;
const compact = value => Array.isArray(value) ? _.compact(value) : _.omitBy(value, _.isNil);

const uglify = new webpack.optimize.UglifyJsPlugin({
  sourceMap: true,
  compress: {
    warnings: false,
    comparisons: false,
  },
  output: {
    comments: false,
    ascii_only: true,
  },
});

module.exports = {
  bail: true,

  context: SRC_PATH,

  devtool: isDev('eval-source-map', 'source-map'),

  devServer: {
    historyApiFallback: true,
    hot: true,
    hotOnly: true,
  },

  entry: compact([
    isDev('react-hot-loader/patch'),
    './index',
  ]),

  output: {
    filename: isDev('[name].bundle.js', '[name]-[chunkhash].bundle.js'),
    chunkFilename: isDev('[name].chunk.js', '[name]-[chunkhash].chunk.js'),
    publicPath: '/',
    path: BUILD_PATH,
  },

  resolve: {
    extensions: [
      '.ts',
      '.tsx',
      '.js',
      '.json',
    ],
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: 'pre',
        loader: 'source-map-loader',
      },

      {
        test: /\.tsx?/,
        use: [
          'react-hot-loader/webpack',
          'awesome-typescript-loader',
        ],
      },
    ],
  },

  plugins: compact([
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
    }),

    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

    new HtmlPlugin({
      template: './index.html',
      minify: isDev(false, {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      }),
    }),

    new AutoDllPlugin({
      inject: true,
      debug: true,
      filename: isDev('[name].dll.js', '[name]-[hash].dll.js'),
      entry: {
        vendors,
      },
      plugins: compact([
        isProd(uglify),
      ]),
    }),

    isDev(new webpack.NoEmitOnErrorsPlugin()),
    isDev(new webpack.NamedModulesPlugin()),
    isDev(new webpack.HotModuleReplacementPlugin()),

    isDev(new CaseSensitivePathsPlugin()),
    isDev(new WatchMissingNodeModulesPlugin()),

    isProd(new CleanPlugin(BUILD_PATH)),

    isProd(uglify),
  ]),
};

Perhaps I'm being optimistic but ... it would be pretty fantastic if we could leverage the webpack loaders we were already using to allow bringing CSS / images into the DLL bundle. Not even sure if its possible, but with packages that are mixed mediums and unchanging (think font-awesome) the inclusion would be pretty sweet.

Not an issue, more a polite request / fervent hope.

EDIT: I noticed that you could add plugins as you do in the webpack config, so I tried adding rules in the same way and it appears to not impact anything. :(

After updating to any version >= 0.3.x my build config is failing as the utils.js has an require to bluebird but that package is listed as an devDependency but mkdirp is in dependencies

Error: Cannot find module 'bluebird'
    at Function.Module._resolveFilename (module.js:513:15)
    at Function.Module._load (module.js:463:25)
    at Module.require (module.js:556:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/mariojerkovic/Documents/Projects/.../node_modules/autodll-webpack-plugin/lib/utils/fs.js:8:17)
    at Module._compile (module.js:612:30)
    at Module._extensions..js (module.js:623:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/mariojerkovic/Documents/Projects/.../node_modules/babel-watch/runner.js:63:7)
    at Module.load (module.js:531:32)
    at tryModuleLoad (module.js:494:12)

defined in webpack.config.js

resolve: {
  alias: {
	  struct: 'ax-struct-js',
		ax: 'ax-js'
  }
}

some file include struct

import struct from 'struct'
// as import struct from 'ax-struct-js'

auto AutoDllPlugin setting

	new AutoDLLPlugin({
		inject: true,
		debug: true,
		filename: '[name]_[hash].js',
		path: './dll',
		entry: {
			vendor: [
				'react',
				'react-dom',
				'ax-js',
				'ax-struct-js'
			]
		}
	})

alias will get inoperative

Pim@AS-DEV06 MINGW64 /c/dev/autodll/examples/recommended (master)
$ npm start

[email protected] start C:\dev\autodll\examples\recommended
webpack-dev-server --history-api-fallback --config ./webpack.config.js

Project is running at http://localhost:8080/
webpack output is served from /
404s will fallback to /index.html
AutoDllPlugin: is valid cache? false
AutoDllPlugin: cleanup
AutoDllPlugin: compile
{ Error: invalid argument
at pathToArray (C:\dev\autodll\node_modules\memory-fs\lib\MemoryFileSystem.js:44:10)
at MemoryFileSystem.writeFileSync (C:\dev\autodll\node_modules\memory-fs\lib\MemoryFileSystem.js:200:13)
at C:\dev\autodll\lib\createMemory.js:62:11
at tryCatcher (C:\dev\autodll\node_modules\bluebird\js\release\util.js:16:23)
at Object.gotValue (C:\dev\autodll\node_modules\bluebird\js\release\reduce.js:155:18)
at Object.gotAccum (C:\dev\autodll\node_modules\bluebird\js\release\reduce.js:144:25)
at Object.tryCatcher (C:\dev\autodll\node_modules\bluebird\js\release\util.js:16:23)
at Promise._settlePromiseFromHandler (C:\dev\autodll\node_modules\bluebird\js\release\promise.js:512:31)
at Promise._settlePromise (C:\dev\autodll\node_modules\bluebird\js\release\promise.js:569:18)
at Promise._settlePromiseCtx (C:\dev\autodll\node_modules\bluebird\js\release\promise.js:606:10)
at Async._drainQueue (C:\dev\autodll\node_modules\bluebird\js\release\async.js:138:12)
at Async._drainQueues (C:\dev\autodll\node_modules\bluebird\js\release\async.js:143:10)
at Immediate.Async.drainQueues (C:\dev\autodll\node_modules\bluebird\js\release\async.js:17:14)
at runCallback (timers.js:649:20)
at tryOnImmediate (timers.js:622:5)
at processImmediate [as _immediateCallback] (timers.js:594:5)
code: 'EINVAL',
errno: 18,
message: 'invalid argument',
path: '\assets\vendor_5526a1788371ac712b7d.js' }

npm version 4.1.2
node version 6.9.4

@asfktz Hey , I provider an typescript example which minification does not work

https://github.com/twocucao/YaNgAdmin

the configuration is here

https://github.com/twocucao/YaNgAdmin/blob/de89900467027b7b2a35d166fefc77e6f0c72071/config/webpack.dev.js#L181

clone this repo

yarn && npm run build:dev

The package version available on npm is still 0.0.7.

v0.0.7 vs 0.0.8

As you can see, there are important bug fixes not yet published. Please publish at the earliest.

Link - https://www.npmjs.com/package/autodll-webpack-plugin

I'm not seeing any way to pass additional options to the webpack compiler. Not even something as common as using the UglifyJSPlugin.

Because of this, the resultant file is not minified or optimized in any way and is very large. Am I missing something or have you just not added these capabilities yet?

creating this issue for a reminder :)

I use recommend examples, using webpack-dev-server --history-api-fallback --config ./webpack.config.js to run local dev env, and I found that

• in path http://localhost:8080/123, http://localhost:8080/dll/vendor_8e0afce396bf5cfa4447.js is accessible
• in path http://localhost:8080/123/123 , http://localhost:8080/dll/vendor_8e0afce396bf5cfa4447.js is not accessible

webpack config here:

const webpack = require('webpack');
const path = require('path');
const AutoDllPlugin = require('autodll-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',

  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },

  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './src/index.html',
    }),
    new AutoDllPlugin({
      inject: true,
      context: __dirname,
      filename: '[name]_[hash].js',
      path: './dll',
      entry: {
        vendor: [
          'react',
          'react-dom',
          'moment'
        ]
      }
    })
  ]
};

This only affects people looking to contribute to the project. Probably a windows only bug.

λ rm -rf node_modules\
λ yarn
yarn install v0.27.5
[1/4] Resolving packages...
[2/4] Fetching packages...
warning [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
$ npm run build

> [email protected] build E:\Projects\repos\autodll-webpack-plugin
> del-cli ./lib && babel src --out-dir lib

src\compileIfNeeded.js -> lib\compileIfNeeded.js
src\createCompiler.js -> lib\createCompiler.js
src\createConfig.js -> lib\createConfig.js
src\createLogger.js -> lib\createLogger.js
src\createMemory.js -> lib\createMemory.js
src\index.js -> lib\index.js
src\normalizeEntry.js -> lib\normalizeEntry.js
src\paths.js -> lib\paths.js
src\plugin.js -> lib\plugin.js
src\utils\fs.js -> lib\utils\fs.js
src\utils\index.js -> lib\utils\index.js
Done in 20.65s.

λ yarn test
yarn test v0.27.5
$ tape -r babel-register specs/**/*.js | faucet
module.js:487
    throw err;
    ^

Error: Cannot find module 'E:\Projects\repos\autodll-webpack-plugin\-r'
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at E:\Projects\repos\autodll-webpack-plugin\node_modules\faucet\node_modules\tape\bin\tape:5:5
    at Array.forEach (native)
    at Object.<anonymous> (E:\Projects\repos\autodll-webpack-plugin\node_modules\faucet\node_modules\tape\bin\tape:4:23)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
not ok 1 no plan found
not ok 2 no assertions found
⨯ fail  2
error Command failed with exit code 1.

λ npm test

> [email protected] test E:\Projects\repos\autodll-webpack-plugin
> tape -r babel-register specs/**/*.js | faucet

module.js:487
    throw err;
    ^

Error: Cannot find module 'E:\Projects\repos\autodll-webpack-plugin\-r'
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at E:\Projects\repos\autodll-webpack-plugin\node_modules\faucet\node_modules\tape\bin\tape:5:5
    at Array.forEach (native)
    at Object.<anonymous> (E:\Projects\repos\autodll-webpack-plugin\node_modules\faucet\node_modules\tape\bin\tape:4:23)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
not ok 1 no plan found
not ok 2 no assertions found
⨯ fail  2

If I do an npm install, the tests run but one fails:

λ npm test

> [email protected] test E:\Projects\repos\autodll-webpack-plugin
> tape -r babel-register specs/**/*.js | faucet

✓ compileIfNeeded: compile: should not call getCompiler when entry is {}
✓ compileIfNeeded: should generate files
✓ compileIfNeeded: should skip when settings equals lastSettings.json
✓ createConfig
# createMemory should have bundles

E:\Projects\repos\autodll-webpack-plugin\node_modules\memory-fs\lib\MemoryFileSystem.js:44
                        throw new MemoryFileSystemError(errors.code.EINVAL, path);
                        ^
Error
    at pathToArray (E:\Projects\repos\autodll-webpack-plugin\node_modules\memory-fs\lib\MemoryFileSystem.js:44:10)
    at MemoryFileSystem.mkdirpSync (E:\Projects\repos\autodll-webpack-plugin\node_modules\memory-fs\lib\MemoryFileSystem.js:139:13)
    at createFakeFS (E:/Projects/repos/autodll-webpack-plugin/specs/createMemory.spec.js:12:6)
    at Test.t (E:/Projects/repos/autodll-webpack-plugin/specs/createMemory.spec.js:20:14)
    at Test.bound [as _cb] (E:\Projects\repos\autodll-webpack-plugin\node_modules\tape\lib\test.js:64:32)
    at Test.run (E:\Projects\repos\autodll-webpack-plugin\node_modules\tape\lib\test.js:83:10)
    at Test.bound [as run] (E:\Projects\repos\autodll-webpack-plugin\node_modules\tape\lib\test.js:64:32)
    at Immediate.next (E:\Projects\repos\autodll-webpack-plugin\node_modules\tape\lib\results.js:71:15)
    at runCallback (timers.js:800:20)
    at tryOnImmediate (timers.js:762:5)
✓ createMemory should have bundlesiateCallback] (timers.js:733:5)
not ok 7 no plan found
⨯ fail  1

Trying to utilize this plugin and found that when you add two AutoDLLPlugins to the webpack config the last one wins in creating a manifest in .cache.

To reproduce add two plugins, and attempt a build.

Relevant comment
facebook/create-react-app#2014 (comment)

Possible solution
facebook/create-react-app#2700

This only affects people looking to contribute to the project. I realise that you are using yarn but I haven't yet switched to it. If I try npm install, the following happens:

> [email protected] install E:\Projects\repos\autodll-webpack-plugin\node_modules\fsevents
> node install

> [email protected] postinstall E:\Projects\repos\autodll-webpack-plugin\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

npm WARN prepublish-on-install As of npm@5, `prepublish` scripts are deprecated.
npm WARN prepublish-on-install Use `prepare` for build steps and `prepublishOnly` for upload-only.
npm WARN prepublish-on-install See the deprecation note in `npm help scripts` for more information.

> [email protected] prepublish E:\Projects\repos\autodll-webpack-plugin
> npm run build

> [email protected] build E:\Projects\repos\autodll-webpack-plugin
> del ./lib && babel src --out-dir lib

Invalid switch - "lib".
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `del ./lib && babel src --out-dir lib`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Additionally, I am on windows so del ./lib && babel src --out-dir lib isn't valid either.

If I try to run the recommended example with node 4, the following happens:

λ npm install
npm WARN package.json [email protected] No description
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No README data
npm WARN unmet dependency E:\Projects\repos\autodll-webpack-plugin\examples\recommended\node_modules\html-webpack-plugin\node_modules\pretty-error\node_modules\renderkid requires utila@'~0.3' but will load
npm WARN unmet dependency E:\Projects\repos\autodll-webpack-plugin\examples\recommended\node_modules\html-webpack-plugin\node_modules\pretty-error\node_modules\utila,
npm WARN unmet dependency which is version 0.4.0
npm WARN unmet dependency E:\Projects\repos\autodll-webpack-plugin\examples\recommended\node_modules\webpack-dev-server\node_modules\http-proxy-middleware\node_modules\micromatch requires is-glob@'^2.0.1' but will load
npm WARN unmet dependency E:\Projects\repos\autodll-webpack-plugin\examples\recommended\node_modules\webpack-dev-server\node_modules\http-proxy-middleware\node_modules\is-glob,
npm WARN unmet dependency which is version 3.1.0
npm ERR! Windows_NT 6.2.9200
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v4.8.0
npm ERR! npm  v2.15.11
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3
npm ERR! peerinvalid Peer [email protected] wants webpack@^2.2.0

I don't think this is a big deal but maybe mention the compatible node version in the readme? You could also include a engines key in package.json like so:

{
  // ...
  "engines": {
    "node": ">= 6.9.2",
    "npm": ">= 3.10.9"
  },
}

new AutoDllPlugin({
    debug: true,
    filename: '[name].dll.bundle.js',
    entry: {
      'citizen/sp': ['react', 'react-dom'],
    },
  }),

If it is an entry point of webpack, the slash delimiter is recognized as a directory at the output destination, but is not this plugin supported?

This would be useful for packages like webpack-flush-chunks which automatically grab assets via the stats.asssetsByChunkName hash.

By default for example it will grab your main and vendor bundles (along with any rendered dynamic bundles/imports it detects), and insure your dynamic bundles go between your bootstrap/vendor and main.

So essentially this saves you from having to add <script src="dist/vendor.dll.js"></script> just in development. One of the premises of the webpack-flush-chunks setup is to help you have as similar a setup in production as development, to make going from development to production as seamless as possible.

It's a small thing, I just thought I'd bring it to your attention. Thanks for this package by the way! Super easy.

https://stackoverflow.com/questions/44648758/uncaught-referenceerror-vendor-is-not-defined-when-using-dllplugin-and-dllrefer
and
https://stackoverflow.com/questions/42601721/webpack-vendor-dll-reference-error

SCRIPT1002: Syntax error
vendor_0a29a6cf2b71efe024aa.js (118983,18)
SCRIPT5009: 'vendor_0a29a6cf2b71efe024aa' is undefined

Your plugin seems to set library itself so I'm not sure why it's still not working. Any ideas?

This is the clearest and easiest way to use the DLL feature of webpack. Thank you for the examples and great documentation.

I spent most of a work day trying to get it set up the manual way - I wish I had found your plugin sooner!

I would like to obtain the css and js mapping for server side rendering purpose. The produced assets.json does not contain the vendor js...
How to make it works?

Test files reference lib which is created during build. So tests fail like so:

module.js:487
    throw err;
    ^
Error: Cannot find module '../lib/createConfig'
  ...

This approach has a few disadvantages:

• Changes to source files need to be compiled before it can be tested again.
• The current git pre-commit hook will not catch issues because build may not have been run after changes to source files.
• If in the future, if you wanted to setup coverage, you wouldn't be able to get accurate reports for your actual source files.

You can assign this issue to me. I'll try to do the needed changes and make a PR by tomorrow.

I have the following setup:

    new AutoDllPlugin({
      context: path.join(__dirname, '..'),
      filename: '[name].js',
      entry: {
        vendor: [
          'react',
          'react-dom',
          'react-redux',
          'redux',
          'rudy-history/createBrowserHistory',
          'transition-group',
          'redux-first-router',
          'redux-first-router-link',
          'fetch-everywhere',
          'babel-polyfill',
          'redux-devtools-extension/logOnlyInProduction'
        ]
      },
      plugins: [
        new webpack.optimize.UglifyJsPlugin(uglifyOpts),
      ]
    })

but the UglifyJsPlugin is not ran and the vendor.js is not minified.

Any ideas?

Quoting the README

While the DllPlugin has many advantages, it's main drawback is that it requires a lot of boilerplate.
hides away most of their complexity.
commonly accomplished
such a common task

etc.

The webpack site currently lists 26 different plugins. Autodll isn't there, so it will be at least 27th. Adding yet another layer of complexity to an already largely incomprehensible system.

From the quotes above it is apparent that the facilities this plugin provides are great and greatly needed. So it begs the obvious question: why not merge these into DLL Plugin as defaults? This way a developer wouldn't need to search for a yet another plugin or wade through complex configuration to accomplish common tasks.

UPD: Even though webpack site lists 26 plugins there are potentially many more. For example, DLLReferencePlugin is not listed, but exists. Its documentation is inside DLLPlugin

Thanks for the hard work on this plugin. Very much appreciated. I always like the idea of the DLLPlugin but it was generally a hassle to set-up.

Right now I am trying to bring the plugin together with SSR (universal rendering) in my React application framework. I was wondering if there is anything special I have to pass to the plugin config as I would assume there will be different vendor bundles for client and server.

Right now my plugin init code looks like this:

      new AutoDllPlugin({
        filename: "[name].[chunkhash].js",
        context: ROOT,
        debug: true,
        inject: isProduction && isClient,
        entry: {
          vendor: [
            isServer ? SERVER_VENDOR : CLIENT_VENDOR
          ]
        }
      }) : null,

As you mentioned that context is important, I was wondering if there needs to be an additional setting for something like target as server and client code is not able to share the same compiled DLL bundle.

Steps to reproduce:

1. git clone the project
2. cd examples/performance/
3. npm install
4. npm build

Results:

ERROR in ./src/index.js
Module build failed: Error: Couldn't find preset "stage-3" relative to directory "/Users/asafkatz/dev/autodll-webpack-plugin"
    at /Users/asafkatz/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (native)
    at OptionManager.resolvePresets (/Users/asafkatz/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/Users/asafkatz/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/Users/asafkatz/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/Users/asafkatz/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/asafkatz/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/asafkatz/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/Users/asafkatz/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/Users/asafkatz/node_modules/babel-loader/lib/index.js:48:20)
    at Object.module.exports (/Users/asafkatz/node_modules/babel-loader/lib/index.js:163:20)
 @ multi babel-polyfill ./src/index.js

For example:
https://github.com/asfktz/autodll-webpack-plugin/blob/master/examples/recommended/package.json#L11

This can be used either with "autodll-webpack-plugin": "latest" or "autodll-webpack-plugin": "file:../../" as used in the minification exmaple.

Personally, I feel using a latest published version in the examples might be better. But using the file version would handle API changes(if any, in the future) better.

I try to use to simplify the dll config instead of webpack dllplugin，but I have gotten two problem，
the providePlugin doesn not，I use it to export $ and jQuery.
and there are many warning when bundle working， said can't find export **module in @angular/core . but it's work correctly in webpack-dev-server, I use angular-webpack-starter btw.
please help me how can I fix that？