I am trying to use webpack dllPlugin to get a small piece, and I made it work well on the client side, but something was wrong with the server side rendering.
I used this as an example and simplified it, 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') }) ] };
different js code and html code
// 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 index.html in a browser, it works well and displays "a" in the console. But if I excute node dist/output.js , it will get an 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)
therefore it means that I cannot require output.js in my code. Unfortunately, I need to do this when I try to display on the server how these templates
and I think the problem is that module a was processed twice by webpack
So, has anyone encountered this problem? And how did you solve it, want an answer, thanks