5

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.

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

simonchan
  • 51
  • 4
  • See also webpack [issue 2875](https://github.com/webpack/webpack/issues/2875) which contains this information and some discussion – David Fraser Jan 24 '17 at 15:55
  • Possible duplicate of [Building server part of (React) isomorphic webapp with webpack including style-loader for CSS](http://stackoverflow.com/questions/36020514/building-server-part-of-react-isomorphic-webapp-with-webpack-including-style-l) – Paul Sweatte May 06 '17 at 06:16

0 Answers0