从 webpack 包中排除一个模块

Question

我想要像 RequireJS 一样的功能 empty: http://requirejs.org/docs/optimization.html#empty

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

使用 IgnorePlugin 只是让它不被包含，当 require 在代码中使用它时，它会抛出错误 (Uncaught Error: Cannot find module "jquery-migrate")。

我希望它只是 return 未定义，或者类似的东西（比如 RequireJS 中的 empty:）。我不想触及代码中的导入，只是将其配置为 return undefined.

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

Answer 1

你可以尝试在webpack.config中制作一个resolve.alias:

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

Answer 2

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

Answer 3

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

尝试：

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

从 webpack 包中排除一个模块

Exclude a module from webpack bundle

javascript

webpack