从 Webpack DLL 构建中排除模块答案

【问题标题】：Excluding modules from Webpack DLL build从 Webpack DLL 构建中排除模块
【发布时间】：2016-08-29 23:34:37
【问题描述】：

我有一个用于通用 Javascript 应用程序的 Webpack 构建。我正在使用 DLL 插件来预构建我的所有 node_modules。我添加了一个导致 DLL 构建出错的库（见下文）。

我可能可以添加一个 JSON 加载器来解决这个问题。但我根本不想要 React 代码中的 lib。我将它添加到我的排除列表中，但它仍然抛出错误。

这是错误：

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 构建脚本：

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
  ],
};

来自 package.json 的 DLL 插件配置：

"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"
  ]
},

【问题讨论】：

标签： javascript node.js reactjs webpack

【解决方案1】：

我认为您可以使用IgnorePlugin 或ignore-loader 排除某些模块。

https://webpack.github.io/docs/list-of-plugins.html#ignoreplugin

https://github.com/cherrry/ignore-loader

【讨论】：

【解决方案2】：

注意：这仅适用于 react-boilerplate。

要从 DllPlugin 中排除模块，您需要添加模块（或在排除数组中将其标记为依赖的模块）：

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

需要注意的是，如果你没有直接安装constants-browserify模块，你需要找到将其标记为依赖的模块。

另外，正如你所说，如果你想加载模块，那么你需要为 DllPlugin 试图解析的 .json 文件指定一个加载器：

地点：

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

在你的内部

module.exports = { ... }

这将允许 WebPack 正确解析 .json 文件。

【讨论】：

我试图追踪依赖项以放入我的排除数组中。将 JSON 加载器添加到 DLL 构建中花费了太长时间。