spdaly spdaly - 3 months ago 87
React JSX Question

Excluding modules from Webpack DLL build

I have a Webpack build for a universal Javascript application. I am using the DLL plugin to pre-build all my node_modules. I added a lib that is causing the DLL build to error out (see below).

I can probably add a JSON loader to solve the problem. But I don't want the lib in the React code at all. I added it to my exclusion list, but it is still throwing an error.

Here's the error:

Building the Webpack DLL...
Hash: a69a927bfa72ddef88d5
Version: webpack 2.1.0-beta.15
Time: 7152ms
Asset Size Chunks Chunk Names
reactBoilerplateDeps.dll.js 5.58 MB 0 [emitted] reactBoilerplateDeps
chunk {0} reactBoilerplateDeps.dll.js (reactBoilerplateDeps) 5.07 MB [rendered]
[1135] dll reactBoilerplateDeps 12 bytes {0} [built]
+ 1137 hidden modules

ERROR in ./~/constants-browserify/constants.json
Module parse failed: /Users/steve/Projects/elucidate/node_modules/constants-browserify/constants.json Unexpected token (2:12)
You may need an appropriate loader to handle this file type.
| {
| "O_RDONLY": 0,
| "O_WRONLY": 1,
| "O_RDWR": 2,
@ ./~/graceful-fs/polyfills.js 2:16-36


Webpack DLL build script:

const { join } = require('path');
const defaults = require('lodash/defaultsDeep');
const webpack = require('webpack');
const pkg = require(join(process.cwd(), 'package.json'));
const dllPlugin = require('../config').dllPlugin;

if (!pkg.dllPlugin) { process.exit(0); }

const dllConfig = defaults(pkg.dllPlugin, dllPlugin.defaults);
const outputPath = join(process.cwd(), dllConfig.path);

module.exports = {
context: process.cwd(),
entry: dllConfig.dlls ? dllConfig.dlls : dllPlugin.entry(pkg),
devtool: 'eval',
output: {
filename: '[name].dll.js',
path: outputPath,
library: '[name]',
},
node: {
fs: "empty",
},
plugins: [
new webpack.DllPlugin({ name: '[name]', path: join(outputPath, '[name].json') }), // eslint-disable-line no-new
],
};


DLL Plugin configuration from package.json:

"dllPlugin": {
"path": "node_modules/react-boilerplate-dlls",
"exclude": [
"chalk",
"compression",
"cross-env",
"express",
"ip",
"minimist",
"sanitize.css",
"multiparty",
"cloudinary",
"winston",
"morgan",
"body-parser",
"request-promise",
"winston-graylog2",
"yauzl",
"busboy",
"graceful-fs"
],
"include": [
"core-js",
"lodash",
"eventsource-polyfill"
]
},

Answer

NOTE: This is for react-boilerplate only.

To exclude the module from the DllPlugin you need to add the module (or the module that has it marked at its dependant in your excludes array):

excludes = { 
  "constants-browserify",
  ... }

If is important to note that if you did not install the constants-browserify module directly, you will need to find the module that has marked it as a dependancy.

Alternatively, and as you say, if you want load the module then you need to specify a loader for the .json file that the DllPlugin is attempting to parse:

Place:

module: {
  loaders: [
    {
      test: /\.json$/,
      loader: 'json-loader',
    }
  ],
},

inside of your

module.exports = { ... }

This will allow WebPack to correctly parse the .json file.