Loại trừ một module từ webpack bó

Question

Tôi muốn các chức năng tương tự như RequireJS empty:http://requirejs.org/docs/optimization.html#empty

use-case của tôi là tôi bao gồm jquery-migrate trong sự phát triển, nhưng tôi muốn loại trừ này khi xây dựng phục vụ sản xuất.

Sử dụng IgnorePlugin chỉ làm cho nó không bao gồm, và khi require ing nó trong các mã, nó sau đó ném một lỗi (Uncaught Error: Cannot find module "jquery-migrate").

Điều tôi muốn xảy ra là để nó chỉ trả lại không xác định hoặc một cái gì đó tương tự (như empty: trong RequireJS). Id không muốn chạm vào nhập trong mã, chỉ cần định cấu hình để trả về undefined.

EDIT: Sử dụng NormalModuleReplacementPlugin hoạt động, nếu tôi chỉ thay thế tệp trống. Nhưng giữ một tập tin trống xung quanh chỉ cho điều này có vẻ không cần thiết.

Answer 1

tôi sử dụng null-loader cho blanking ra mô-đun. Trình tải noop có thể được sử dụng cho một ít khó xử nếu có trong cấu hình.

Hãy thử:

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

Answer 2

Bạn có thể cố gắng làm cho một resolve.alias trong webpack.config:

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

Answer 3

Sử dụng Webpack của DefinePlugin kết hợp với các plugin sản xuất bình thường (Dedupe và làm xấu đi).

Sau đó trong mã của bạn, bạn có thể viết:

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

Và khi nó được xây dựng trong sản xuất, DEBUG sẽ được thay thế bằng một chữ if(false) { ... } sẽ được loại bỏ hoàn toàn bởi các plugin làm xấu đi, vì vậy test sẽ chỉ có bắt buộc trong bản dựng gỡ lỗi.

Đây là một mẫu Grunt nhiệm vụ cấu hình cho grunt-webpack có development và production mục tiêu cho nhiệm vụ:

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