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

Question

Я хотел бы такую ​​же функциональность как RequireJS empty:http://requirejs.org/docs/optimization.html#empty

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

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

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

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

Answer 1

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

Try:

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

Answer 2

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

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

Answer 3

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

Тогда в вашем коде, вы можете написать:

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

И когда он построен в производстве, то DEBUG будет заменен буквальным if(false) { ... }, который будет полностью удален с помощью уродовать плагина, так 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, 
        } 
       }) 
      ] 
     },