Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

how to use webpack dll plugin in server-side rendering

See original GitHub issue

I have submit this in stackoverflow, but it seems no response, so I wanner to know is that it does not support this usage?

I am trying to use webpack’s dllPlugin to get my chunk small, and I made it work well in client-side but something wrong in server-side rendering.

Webpack version: 1.13.1

environment: OSX 10.11.6

I used this as an example, and make it simpler, here is my demo code:

webpack.config.dll.js

// webpack.config.dll.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    a: ['./a']
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
    library: '[name]'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, 'dist', 'manifest.json'),
      name: '[name]'
    })
  ]
}

webpack.config.js

// webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './example',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'output.js'
  },
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./dist/manifest.json')
    })
  ]
};

other js code and html code is

// a.js
module.exports = 'a';

// example.js
console.log(require("./a"));

// index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="dist/a.js"></script>
  <script src="dist/output.js"></script>
</body>
</html>

if I open the index.html in browser, it work well and output ‘a’ in console. But if I excute node dist/output.js, it will get error:

/WorkSpace/code/webpack/005_dllPluginDemo_20160813/dist/output.js:64
    module.exports = a;
                     ^

ReferenceError: a is not defined
    at Object.<anonymous> (/WorkSpace/code/webpack/005_dllPluginDemo_20160813/dist/output.js:64:19)
    at __webpack_require__ (/WorkSpace/code/webpack/005_dllPluginDemo_20160813/dist/output.js:20:30)
    at Object.module.exports (/WorkSpace/code/webpack/005_dllPluginDemo_20160813/dist/output.js:58:20)
    at __webpack_require__ (/WorkSpace/code/webpack/005_dllPluginDemo_20160813/dist/output.js:20:30)
    at Object.<anonymous> (/WorkSpace/code/webpack/005_dllPluginDemo_20160813/dist/output.js:48:14)
    at __webpack_require__ (/WorkSpace/code/webpack/005_dllPluginDemo_20160813/dist/output.js:20:30)
    at /WorkSpace/code/webpack/005_dllPluginDemo_20160813/dist/output.js:40:18
    at Object.<anonymous> (/WorkSpace/code/webpack/005_dllPluginDemo_20160813/dist/output.js:43:10)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)

so it means that I can’t require output.js in my code. Unfortunately, I need do that when I try to render in server, just like this boilerplates

and I think the problem is that the module a had been deal twice by webpack

So is there anybody met this problem? And how did you solve it, wish your answer, thanks

Issue Analytics

State:
Created 7 years ago
Reactions:6
Comments:13 (4 by maintainers)

Top GitHub Comments

8reactions

davidfrasercommented, Jan 24, 2017

The problem seems to be that the browser solution involves loading the DLL Javascript using a <script> tag, before the main module. There is no obvious way to do the equivalent with server-side node…

2reactions

sokracommented, Aug 17, 2016

output.libraryTarget = "commonjs2"