从 webpack 包中排除模块答案

【问题标题】：Exclude a module from webpack bundle从 webpack 包中排除模块
【发布时间】：2015-04-22 11:14:52
【问题描述】：

我想要与 RequireJS empty: http://requirejs.org/docs/optimization.html#empty 相同的功能

我的用例是我在开发中包含jquery-migrate，但我想在为生产构建时排除它。

使用IgnorePlugin 只会使其不包含在内，当require在代码中使用它时，它会引发错误（Uncaught Error: Cannot find module "jquery-migrate"）。

我希望它只返回 undefined 或类似的东西（如 RequireJS 中的 empty:）。我不想碰代码中的导入，只需将其配置为返回undefined。

编辑：如果我将替换指向一个空文件，则使用 NormalModuleReplacementPlugin 有效。但是为此保留一个空文件似乎没有必要。

【问题讨论】：

标签： javascript webpack

【解决方案1】：

我使用 null-loader 来清空模块。 noop-loader 可用于配置中不那么尴尬的 if-else。

试试：

rules: [{
    test: /jquery-migrate/,
    use: IS_DEV ? 'null-loader' : 'noop-loader'
}]

【讨论】：

这似乎对我有用，我认为最好地回答 OP 的问题。代码没有变化，我的代码顶部仍然有一个import foo fro 'excluded-module'，没有有趣的if (DEV) 包装器。想象一下require('excluded-module') 也能正常工作。
注意其他新手，这些加载器不包含在 webpack 中：npm install --save-dev null-loader && npm install --save-dev noop-loader
有没有没有模块的方法？我刚刚尝试了loader: () => {}，但仍然出现无法解决的错误。

【解决方案2】：

你可以尝试在 webpack.config 中创建一个 resolve.alias：

resolve: {
    alias: {
         "jquery-migrate": process.env.NODE_ENV === 'production' ? "empty-module": "jquery-migrate"
    }
}

【讨论】：

这仍然迫使我放置一个空模块。比NormalModuleReplacementPlugin 更干净，不过:)
@Simen npm i -D empty-module

【解决方案3】：

将 Webpack 的 DefinePlugin 与正常的生产插件（Dedupe 和 Uglify）结合使用。

然后在你的代码中你可以写：

if(DEBUG) {
    var test = require('test');
    alert(test);
}

当它在生产中构建时，DEBUG 将被替换为文字 if(false) { ... }，这将被 uglify 插件完全删除，因此 test 仅在调试版本中需要。

下面是 grunt-webpack 的示例 Grunt 任务配置，该任务具有 development 和 production 目标：

        development: {
            devtool: "sourcemap",
            output: {
                pathinfo: true,
            },
            debug: true,
            production: false,
            plugins: [
                new webpack.DefinePlugin({
                    DEBUG: true,
                    PRODUCTION: false
                })
            ]
        },

        production: {
            plugins: [
                new webpack.DefinePlugin({
                    DEBUG: false,
                    PRODUCTION: true
                }),
                new webpack.optimize.DedupePlugin(),
                new webpack.optimize.UglifyJsPlugin({
                    output: {
                        comments: false,
                    }
                })
            ]
        },

【讨论】：

我实际上更喜欢使用调试语句而不是构建工具脚本来装饰源代码。在尝试了解 jQuery-migrate 的来源时，在回到代码和其他人之后，它会让你自己更容易理解。
是的。不过，这对 AMD 来说并不干净，至少如果在原始的 define 调用中列出的话。使用别名与empty: 完全一样，只是我必须自己创建empty 模块。