Исключить модуль из пакета webpack

Мне нужны те же функции, что и RequireJS empty: http://requirejs.org/docs/optimization.html#empty

Мое использование - это то, что я включаю jquery-migrate в разработку, но я хотел бы исключить это при создании для производства.

Использование IgnorePlugin просто делает его не включенным, а когда require вводит его в код, он выдает ошибку (Uncaught Error: Cannot find module "jquery-migrate").

То, что я хотел бы сделать, это просто вернуть undefined или что-то подобное (например, empty: в RequireJS). Id нравится не касаться импорта в коде, просто настроив его на возврат undefined.

EDIT: Использование NormalModuleReplacementPlugin работает, если я укажу замену на пустой файл. Но держать пустой файл вокруг только для этого кажется ненужным.

Ответы

Ответ 1

Я использую нулевой загрузчик для гашения модулей. Noop-loader можно использовать для менее неудобного if-else в конфигурации.

Try:

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

Ответ 2

Вы можете попробовать сделать файл resolve.alias в webpack.config:

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

Ответ 3

Используйте Webpack DefinePlugin в сочетании с нормальными производственными плагинами (Dedupe и Uglify).

Затем в коде вы можете написать:

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

И когда он будет создан в производстве, DEBUG будет заменен литеральным if(false) { ... }, который будет полностью удален плагином uglify, поэтому test потребуется только в сборке отладки.

Здесь приведен пример конфигурации задачи Grunt для grunt-webpack, для которой заданы 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,
                    }
                })
            ]
        },