从Webpack打包中排除一个模块

Question

我的需求和 RequireJS 的 empty: 功能相同，详见http://requirejs.org/docs/optimization.html#empty

我的使用场景是在开发过程中包含了 jquery-migrate，但在生成生产环境时我想排除它。

使用 IgnorePlugin 可以使其不被包含进来，但当在代码中进行require时，它会抛出一个错误 (Uncaught Error: Cannot find module "jquery-migrate")。

我希望的是，在这种情况下，它只是返回未定义或类似的东西（就像 RequireJS 中的 empty:）。 我希望不需要更改代码中的导入方式，只需配置使其返回 undefined。

编辑：使用 NormalModuleReplacementPlugin 可行，只需将替换指向一个空文件即可。 但是维护一个空文件只为此目的似乎有些不必要。

- SimenB

Answer 1

我使用空加载器来屏蔽模块。

如果不想在配置文件中使用笨拙的 if-else，可以使用 noop-loader。

尝试：

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

- Rick

---

这对我来说似乎很有效，我认为这是最好的回答OP的问题。代码没有改变，我仍然在代码顶部有一个import foo fro 'excluded-module'，没有任何有趣的if (DEV)包装。想象一下require('excluded-module')同样有效。 - thom_nic

提醒其他新手，这些加载器不包含在webpack中：npm install --save-dev null-loader && npm install --save-dev noop-loader - diachedelic

有没有不使用模块的方法？我刚刚尝试了loader: () => {}，但仍然出现了“无法解析”的错误。 - Sophie McCarrell

Answer 2

您可以尝试在webpack.config中创建resolve.alias:

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

- Peter Kese

---

这仍然迫使我留下一个空模块。虽然比NormalModuleReplacementPlugin更干净 :) - SimenB

安装空模块：在命令行中输入 npm i -D empty-module。其中 -D 表示将该模块添加到开发依赖中。 - srcspider

Answer 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,
                    }
                })
            ]
        },

- Jonathan Dumaine

---

我更倾向于在源代码中加入调试语句，而不是在构建工具脚本中添加。这使得在回到代码时更易于理解，同时也有助于他人理解jQuery-migrate的来源。 - Jonathan Dumaine

True。但是，如果在原始的define调用中列出，则这对AMD不起作用。使用别名与empty:完全相同，只是我必须自己创建empty模块。 - SimenB