Example config of SSR setup: vue-cli-ssr-example and vue-cli3-ssr-project.

There is important things:

configureWebpack: () => ({
  target: TARGET_NODE ? 'node' : 'web',
  node: TARGET_NODE ? undefined : false,
  entry: {
    [target]: [`./src/entry-${target}`]
  },
  output: {
    libraryTarget: TARGET_NODE
      ? 'commonjs2'
      : undefined
  }
  // ...
}

And dll-plugin must not extract (or do it somehow else) vendors when running in server-side mode - there is one solid file as the server-entry result: 'vue-ssr-server-bundle.json'. No 'dll_library' variable. Maybe it can work as 'webpack-node-externals' - packages (except the whitelist of forced-transpilation, respect the externals property of webpack config) on the server-side must be taken directly from node_modules folder. It's all there.

Stack trace:

NodeInvocationException: dll_library is not defined
ReferenceError: dll_library is not defined
at eval (eval at dll-reference dll_library (server.js:748:1), <anonymous>:1:18)
at Object.dll-reference dll_library (server.js:748:1)
at __webpack_require__ (server.js:27:30)
at eval (webpack-internal:///./node_modules/vuetify/lib/index.js:1:19)
at Object../node_modules/vuetify/lib/index.js (server.js:319:1)
at __webpack_require__ (server.js:27:30)
at eval (webpack-internal:///./src/plugins/vuetify.js:4:69)
at Module../src/plugins/vuetify.js (server.js:497:1)
at __webpack_require__ (server.js:27:30)
at eval (webpack-internal:///./src/app.js:11:74)

Temporary solution is to set open: !TARGET_NODE && IS_DEVELOPMENT to disable plugin on server side.

output: filename 可以自定义吗
如何做到自定义文件名，不要 hash 值

我看到代码中是写死的

这个插件方便了我们 dll 的配置。使用 dll 的目的之一是为了减少构建时间。我们会把不会变动的一些基础库放入 dll 中。会提前把 dll 打包好然后构建服务器执行构建。但是因为 cache.dll.json 文件路径写死再包目录下面，所以我们不能将这个文件纳入版本管理，服务器依然要执行一次 dll 构建。我有几个建议可以讨论一下 :)

1. 不再使用 cache.dll.json 文件，直接扫描 output 目录中的 .dll.js 文件
2. 自定义配置 cache.dll.json 路径

Inside of fileNameCachePlugin.js#saveCacheFileNameList it seems that fs.writeFile is expecting a callback as the third argument.

When I patch it locally by passing the callback in as a third argument, my dll builds fine.

Version [email protected]
Node Version: 10.14.2 (lts)

Stacktrace:

╰─ npx vue-cli-service dll
Starting build dll...
fs.js:129
  throw new ERR_INVALID_CALLBACK();
  ^

TypeError [ERR_INVALID_CALLBACK]: Callback must be a function
    at maybeCallback (fs.js:129:9)
    at Object.writeFile (fs.js:1159:14)
    at Function.saveCacheFileNameList (/Users/jessicasachs/projects/tags/node_modules/vue-cli-plugin-dll/src/fileNameCachePlugin.js:9:12)
    at compiler.hooks.emit.tapAsync (/Users/jessicasachs/projects/tags/node_modules/vue-cli-plugin-dll/src/fileNameCachePlugin.js:24:33)
    at _err0 (eval at create (/Users/jessicasachs/projects/tags/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
    at /Users/jessicasachs/projects/tags/node_modules/neo-async/async.js:2825:7
    at done (/Users/jessicasachs/projects/tags/node_modules/neo-async/async.js:2861:11)
    at /Users/jessicasachs/projects/tags/node_modules/neo-async/async.js:2813:7
    at /Users/jessicasachs/projects/tags/node_modules/graceful-fs/graceful-fs.js:45:10
    at FSReqWrap.oncomplete (fs.js:141:20)

:）

我自己配置dllplugin，运行yarn serve打开页面一直报错。但是yarn build后却可以正常打开页面

这是webpack.config.dll.js

...
const AssetsPlugin = require('assets-webpack-plugin')
module.exports = {
  entry: {
    vender: ['vue']
  },
  output: {
    path: path.join(__dirname, 'dll'),
    filename: 'dll.[name]_[hash].js',
    library: '[name]_[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_[hash]',
      path: path.join(__dirname, 'dll', 'manifest.json')
    }),
    new AssetsPlugin({
      filename: 'bundle-config.json',
      path: './'
    })

这是vue.config.js

...
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DllReferencePlugin({
        manifest: require('./dll/manifest.json')
      }),
      new HtmlWebpackPlugin({
        inject: true,
        template: './public/index.html',
        filename: 'index.html',
        vendorJsName: bundleConfig.vender.js
      })
    ]
  }
}

public/index.html里面加了一行

<script src="dll/<%= htmlWebpackPlugin.options.vendorJsName %>"></script>

ERROR Error: Build failed with errors.
Error: Build failed with errors.
at webpack (/Users/yubh/haoweilai/mobile-h5-user/node
_modules/vue-cli-plugin-dll/service.js:122:39)
at finalCallback (/Users/yubh/haoweilai/mobile-h5-use
r/node_modules/webpack/lib/Compiler.js:214:39)
at hooks.done.callAsync.err (/Users/yubh/haoweilai/mo
bile-h5-user/node_modules/webpack/lib/Compiler.js:230:13)
at AsyncSeriesHook.eval [as callAsync] (eval at creat
e (/Users/yubh/haoweilai/mobile-h5-user/node_modules/tapa
ble/lib/HookCodeFactory.js:32:10), :6:1)
at AsyncSeriesHook.lazyCompileHook (/Users/yubh/haowe
ilai/mobile-h5-user/node_modules/tapable/lib/Hook.js:154:
20)
at onCompiled (/Users/yubh/haoweilai/mobile-h5-user/n
ode_modules/webpack/lib/Compiler.js:228:21)
at hooks.afterCompile.callAsync.err (/Users/yubh/haoweilai/mobile-h5-user/node_modules/webpack/lib/Compiler.js:556:14)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/yubh/haoweilai/mobile-h5-user/node_modules/tapable/lib/HookCodeFactory.js:32:10), :6:1)
at AsyncSeriesHook.lazyCompileHook (/Users/yubh/haoweilai/mobile-h5-user/node_modules/tapable/lib/Hook.js:154:20)
at compilation.seal.err (/Users/yubh/haoweilai/mobile-h5-user/node_modules/webpack/lib/Compiler.js:553:30)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/yubh/haoweilai/mobile-h5-user/node_modules/tapable/lib/HookCodeFactory.js:32:10), :6:1)
at AsyncSeriesHook.lazyCompileHook (/Users/yubh/haoweilai/mobile-h5-user/node_modules/tapable/lib/Hook.js:154:20)
at hooks.optimizeAssets.callAsync.err (/Users/yubh/haoweilai/mobile-h5-user/node_modules/webpack/lib/Compilation.js:1323:35)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/yubh/haoweilai/mobile-h5-user/node_modules/tapable/lib/HookCodeFactory.js:32:10), :6:1)
at AsyncSeriesHook.lazyCompileHook (/Users/yubh/haoweilai/mobile-h5-user/node_modules/tapable/lib/Hook.js:154:20)
at hooks.optimizeChunkAssets.callAsync.err (/Users/yubh/haoweilai/mobile-h5-user/node_modules/webpack/lib/Compilation.js:1314:32)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dll: vue-cli-service dll
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dll script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/yubh/.npm/_logs/2019-03-21T15_26_21_952Z-debug.log

在vue-element-admin使用dll的配置，生成dll文件没发生错误 ，但生成build:prod时出错。
vue.config.js：
{
pluginOptions: {
dll: {
entry: {
vuedll: ['vue', 'vuex', 'vue-router', 'axios'],
elementui: ['element-ui']
},
output: path.resolve(__dirname, './public-dll'),
cacheFilePath: path.resolve(__dirname, './public-dll'),
open: true,
inject: true
}
}
}
生成dll后：

生成build:prod报错：
ScriptExtHtmlWebpackPlugin: no asset with href 'jsruntime.723ebb37.dll.js'
我觉得可能是两个dll之间的公共代码没有处理好

vue-cli3中预配置的有抽取公共模块代码，比如抽取vue，vuex，到一个chunk-vendors-[hash].js中
采用抽取dll预编译的方式是不是要取消这种配置？

vue.config.js 的里删除注释配置对生成的 dll 文件无效，请问 dll 插件如可添加删除注释功能。

因项目需求，webpack打包时使用了一些插件：
IgnorePlugin - 用于过滤moment的语言包
BundleAnalyzerPlugin - 项目依赖分析
UglifyJsPlugin - 打包构建优化
WebpackBar - 打包进度UI
。。。
等等
是否 Dll 可以提供一种方式能使用一些filter之外的Webpack的plugin，以支持在使用dll的前提下，能完成特定的打包目的？

Just placed in my vue.config.js and was runned. In module.exports of vue.config.js:

pluginOptions: {
	dll: {
		entry: [
			'vue',
			'vue-i18n',
			'vue-router',
			'vuex',
			'vuex-router-sync',
			//'vuetify/lib'
			//'vuetify/src/stylus/app.styl',
			'@fortawesome/fontawesome-svg-core',
			'@fortawesome/vue-fontawesome',
			'@fortawesome/free-solid-svg-icons'
		],
		open: process.env.NODE_ENV === 'development'
	}
}

In vue.config.js, configureWebpack:

target: TARGET_NODE ? 'node' : 'web',
output: {
  libraryExport: 'default',
  libraryTarget: TARGET_NODE
    ? 'commonjs2'
    : undefined
},

In browser's console:

vue.runtime.esm.js from dll-reference dll_library:1 Uncaught TypeError: __webpack_require__(...) is not a function
    at Object../node_modules/vue/dist/vue.runtime.esm.js (vue.runtime.esm.js from dll-reference dll_library:1)
    at __webpack_require__ (bootstrap:766)
    at fn (bootstrap:129)
    at Module../src/entry-client.js (entry-client.js:1)
    at __webpack_require__ (bootstrap:766)
    at fn (bootstrap:129)
    at Object.0 (client.7d0247628d2d6e6f84cf.js:35021)
    at __webpack_require__ (bootstrap:766)
    at bootstrap:901
    at bootstrap:901

In babel.config.js:

const presets = [[ '@vue/app', { modules: false, useBuiltIns: false } ]];
module.exports = {
    presets,
    plugins: [ '@babel/plugin-syntax-dynamic-import' ]
}

你好, 我试用了vue-cli-plugin-dll之后, 准备看看不使用它的build时间变化, 我把vue.config.js里面相关代码全部删除了, 但是我build的时候发现仍然有dll.js输出...如何解决这个问题呢?

由于我的项目需要在生产环境支持每个静态文件前面添加一个前缀，即需要使用 vue/webpack 的 publicPath 参数：

// vue.config.js
const is_dev = process.env.NODE_ENV === 'development'

module.exports = {
    publicPath: is_dev ? '/' : '/xyz/',  // 生产环境需要添加 xyz 前缀
    pluginOptions: {
        dll: {
            entry: {
                vue: ['vue']
            },
            open: !is_dev
        },
    },
    ...
}

其中 xyz 是我的项目的名称，作为 url 的前缀。

在最终 yarn build 后，dist/index.html 中：

<script src=js/vue.f86b30a3.dll.js></script>
<script src=/xyz/js/chunk-vendors.691a8960.js></script>
<script src=/xyz/js/app.ba5cf1c4.js>

可以看到 vue 成功支持了 publicPath 参数，添加了前缀（后两个script 标签），但是 dll 的 自动 inject 的 js（第一个 script 标签）的 url 不正确，导致：
我本来是要获取 http://xxx.com/xyz/js/vue.f86b30a3.dll.js，
但是取成了 http://xxx.com/js/vue.f86b30a3.dll.js ，服务器上面不存在这个url。

注：其中 xyz 是通过 nginx 代理的，项目里面没有这个目录。

使用了modern模式后，构建报错，原因可能是vuejs/vue-cli#3845

TypeError: Cannot read property '0' of undefined
at config.plugin.tap.args (/Users/leiyao/Documents/banyu/picture_book_mobile/node_modules/vue-cli-plugin-dll/service.js:38:28)
at Object.tap (/Users/leiyao/Documents/banyu/picture_book_mobile/node_modules/webpack-chain/src/Plugin.js:24:24)
at config.when.config (/Users/leiyao/Documents/banyu/picture_book_mobile/node_modules/vue-cli-plugin-dll/service.js:37:39)
at module.exports.when (/Users/leiyao/Documents/banyu/picture_book_mobile/node_modules/webpack-chain/src/ChainedMap.js:144:7)
at api.chainWebpack.config (/Users/leiyao/Documents/banyu/picture_book_mobile/node_modules/vue-cli-plugin-dll/service.js:20:16)
at webpackChainFns.forEach.fn (/Users/leiyao/Documents/banyu/picture_book_mobile/node_modules/@vue/cli-service/lib/Service.js:227:40)

你好, 我按照教程执行npm run dll的时候被提示出错, 应该如何进行呢?

ss@ss:~/b# npm run dll
npm ERR! missing script: dll
npm ERR! 
npm ERR! Did you mean one of these?
npm ERR!     all
npm ERR!     dlls

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2019-05-22T16_04_02_001Z-debug.log

production模式编译后部署到站点页面加载时报dll_library is not defined错误。
我自己写了一个webpack.dll.config.js然后用webpack-cli进行打包，编译后部署到站点没有报错。
希望能排查一下，解决一下这个问题。

采用插件，配置如下：
pluginOptions: { dll: { entry: ['vue', 'vue-router', 'vuex', 'vue-i18n', 'vuex-persistedstate'], output: path.join(__dirname, './public/dll'), // 只在生产环境加入 webpack.DllReferencePlugin 插件 open: isProduction, inject: true } }

生成dll文件正常，编译时也正常。

config.plugin('copy').tap(args => {
args[0][0].ignore.push(dll.outputDir + '/**')
args[0].push({
from: dll.outputPath,
toType: 'dir',
ignore: ['.js', '.css', '*.manifest.json']
})
return args
})

运行serve时报错，这个copy，可以给一个配置参数不，我的dll没有放在public下面

可以做按需引入吗 比如使用element-ui

如图

Additional line in service.js

return new Promise((resolve, reject) => {
	webpack(webpackConfig, (err, stats) => {
		if (err) {
			return reject(err)
		} else if (stats.hasErrors()) {

			// This one:
			console.log(stats.compilation.errors[0]);

			return reject(new Error('Build failed with errors.'))
		}
		log('Build complete.')
		resolve()
	})
})

gives me following:

Starting build dll... ModuleBuildError: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): TypeError: this[MODULE_TYPE] is not a function

It builds only when I comment entry of 'vuetify/lib'.

error info

ERROR  Error: Cannot find module './src/fileNameCachePlugin'

Error: Cannot find module './src/fileNameCachePlugin'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
    at Function.Module._load (internal/modules/cjs/loader.js:529:25)
    at Module.require (internal/modules/cjs/loader.js:657:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at dll (/Users/snowdrop/Desktop/pahhb_vue3_ui/node_modules/@lynzz/vue-cli-plugin-dll2/service.js:60:37)
    at Service.run (/Users/snowdrop/Desktop/pahhb_vue3_ui/node_modules/@vue/cli-service/lib/Service.js:219:12)
    at Object.<anonymous> (/Users/snowdrop/Desktop/pahhb_vue3_ui/node_modules/@vue/cli-service/bin/vue-cli-service.js:36:9)
    at Module._compile (internal/modules/cjs/loader.js:721:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:774:12)
    at executeUserCode (internal/bootstrap/node.js:499:15)
    at startMainThreadExecution (internal/bootstrap/node.js:436:3)

<script type=text/javascript src=js/dll.361f1b50.dll.js>

这是打包后自动注入到html后的路径，另外在vue-cli中执行npm run build之后，会重复打以此dll.xxx.js包在dist目录下

请问这两个问题怎么解决呢？

no tags, only master, what can y manage your versions????

没看到多页面的相关配置，能不能加上多页面的功能

when i run serve task it's work, but when i use test:unit it's compiled, but before the first test i god this error
`
ReferenceError: dll_library is not defined
at Object.dll-reference dll_library (/Users/jules/WebstormProjects/shaders-midi/dist/webpack:/external "dll_library":1:1)
at webpack_require (/Users/jules/WebstormProjects/shaders-midi/dist/webpack:/webpack/bootstrap:19:1)
at Object../node_modules/vue/dist/vue.runtime.esm.js (/Users/jules/WebstormProjects/shaders-midi/dist/webpack:/delegated ./node_modules/vue/dist/vue.runtime.esm.js from dll-reference dll_library:1:1)
at webpack_require (/Users/jules/WebstormProjects/shaders-midi/dist/webpack:/webpack/bootstrap:19:1)
at Object../node_modules/@vue/test-utils/dist/vue-test-utils.js (/Users/jules/WebstormProjects/shaders-midi/dist/webpack:/node_modules/@vue/test-utils/dist/vue-test-utils.js:5:1)
at webpack_require (/Users/jules/WebstormProjects/shaders-midi/dist/webpack:/webpack/bootstrap:19:1)
at Module../tests/unit/components/MidiLoader.spec.js (/Users/jules/WebstormProjects/shaders-midi/dist/webpack:/tests/unit/components/MidiLoader.spec.js:1:1)
at webpack_require (/Users/jules/WebstormProjects/shaders-midi/dist/webpack:/webpack/bootstrap:19:1)
at run (/Users/jules/WebstormProjects/shaders-midi/dist/webpack:/node_modules/mocha-webpack/lib/entry.js:3:1)
at Array.forEach ()
at Object../node_modules/mocha-webpack/lib/entry.js (/Users/jules/WebstormProjects/shaders-midi/dist/webpack:/node_modules/mocha-webpack/lib/entry.js:10:1)
at webpack_require (/Users/jules/WebstormProjects/shaders-midi/dist/webpack:/webpack/bootstrap:19:1)
at /Users/jules/WebstormProjects/shaders-midi/dist/webpack:/webpack/bootstrap:83:1
at Object. (/Users/jules/WebstormProjects/shaders-midi/dist/main.js:87:10)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object._module2.default._extensions.(anonymous function) [as .js] (/Users/jules/WebstormProjects/shaders-midi/node_modules/mocha-webpack/lib/util/registerRequireHook.js:148:12)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at /Users/jules/WebstormProjects/shaders-midi/node_modules/mocha/lib/mocha.js:250:27
at Array.forEach ()
at Mocha.loadFiles (/Users/jules/WebstormProjects/shaders-midi/node_modules/mocha/lib/mocha.js:247:14)
at Mocha.run (/Users/jules/WebstormProjects/shaders-midi/node_modules/mocha/lib/mocha.js:576:10)
at /Users/jules/WebstormProjects/shaders-midi/node_modules/mocha-webpack/lib/runner/TestRunner.js:191:27
at /Users/jules/WebstormProjects/shaders-midi/node_modules/mocha-webpack/lib/webpack/compiler/registerReadyCallback.js:26:7
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/jules/WebstormProjects/shaders-midi/node_modules/tapable/lib/HookCodeFactory.js:32:10), :45:1)
at AsyncSeriesHook.lazyCompileHook (/Users/jules/WebstormProjects/shaders-midi/node_modules/tapable/lib/Hook.js:154:20)
at emitRecords.err (/Users/jules/WebstormProjects/shaders-midi/node_modules/webpack/lib/Compiler.js:261:22)
at Compiler.emitRecords (/Users/jules/WebstormProjects/shaders-midi/node_modules/webpack/lib/Compiler.js:375:39)
at emitAssets.err (/Users/jules/WebstormProjects/shaders-midi/node_modules/webpack/lib/Compiler.js:255:10)
at hooks.afterEmit.callAsync.err (/Users/jules/WebstormProjects/shaders-midi/node_modules/webpack/lib/Compiler.js:361:14)
at _err0 (eval at create (/Users/jules/WebstormProjects/shaders-midi/node_modules/tapable/lib/HookCodeFactory.js:32:10), :16:1)
at callback (/Users/jules/WebstormProjects/shaders-midi/node_modules/copy-webpack-plugin/dist/index.js:126:17)
at afterEmit (/Users/jules/WebstormProjects/shaders-midi/node_modules/copy-webpack-plugin/dist/index.js:220:13)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/jules/WebstormProjects/shaders-midi/node_modules/tapable/lib/HookCodeFactory.js:32:10), :12:1)
at AsyncSeriesHook.lazyCompileHook (/Users/jules/WebstormProjects/shaders-midi/node_modules/tapable/lib/Hook.js:154:20)
at asyncLib.forEach.err (/Users/jules/WebstormProjects/shaders-midi/node_modules/webpack/lib/Compiler.js:358:27)
at /Users/jules/WebstormProjects/shaders-midi/node_modules/neo-async/async.js:2825:7
at done (/Users/jules/WebstormProjects/shaders-midi/node_modules/neo-async/async.js:2861:11)
at /Users/jules/WebstormProjects/shaders-midi/node_modules/neo-async/async.js:2813:7
at MemoryFileSystem.writeFile (/Users/jules/WebstormProjects/shaders-midi/node_modules/memory-fs/lib/MemoryFileSystem.js:328:9)
at writeOut (/Users/jules/WebstormProjects/shaders-midi/node_modules/webpack/lib/Compiler.js:342:29)
at Immediate._onImmediate (/Users/jules/WebstormProjects/shaders-midi/node_modules/memory-fs/lib/MemoryFileSystem.js:288:4)
at runCallback (timers.js:705:18)
at tryOnImmediate (timers.js:676:5)
at processImmediate (timers.js:658:5)

`