Webpack 2 - bộ tải babel - cách loại trừ node_modules?

Question

Vì tôi đã nâng cấp lên Webpack 2, tôi không thể có "loại trừ" trong "quy tắc" của mình. Không thể chuyển "loại trừ" thành "tùy chọn". Cách làm đúng là gì?

Trước:

{ 
    test: /\.js$/, 
    loader: 'babel-loader', 
    exclude: /node_modules/, 
} 

Bây giờ là:

{ 
    test: /\.js$/, 
    use: [{ loader: 'babel-loader' }] 
    ??? 
} 

Toàn bộ cấu hình:

const path = require('path'); 
    //const autoprefixer = require('autoprefixer'); 
    const postcssImport = require('postcss-import'); 
    const merge = require('webpack-merge'); 
    const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin'); 

    const development = require('./dev.config.js'); 
    const demo = require('./demo.config.js'); 
    const test = require('./test.config.js'); 
    const staging = require('./staging.config.js'); 
    const production = require('./prod.config.js'); 

    const TARGET = process.env.npm_lifecycle_event; 

    const PATHS = { 
     app: path.join(__dirname, '../src'), 
     build: path.join(__dirname, '../dist'), 
    }; 

    process.env.BABEL_ENV = TARGET; 

    const common = { 
     entry: [ 
     PATHS.app, 
     ], 

     output: { 
     path: PATHS.build, 
     filename: 'bundle.js', 
     chunkFilename: '[name]-[hash].js', 
     }, 

     resolve: { 
     alias: { 
      config: path.join(PATHS.app + '/config', process.env.NODE_ENV || 'development'), 
      soundmanager2: 'soundmanager2/script/soundmanager2-nodebug-jsmin.js', 
     }, 
     extensions: ['.jsx', '.js', '.json', '.scss'], 
     modules: ['node_modules', PATHS.app], 
     }, 

     module: { 
     rules: [{ 
      test: /bootstrap-sass\/assets\/javascripts\//, 
      use: [{ loader: 'imports-loader', options: { jQuery: 'jquery' } }] 
     }, { 
      test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, 
      use: [{ loader: 'url-loader', options: { limit: '10000', mimetype: 'application/font-woff' } }] 
     }, { 
      test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, 
      use: [{ loader: 'url-loader', options: { limit: '10000', mimetype: 'application/font-woff' } }] 
     }, { 
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
      use: [{ loader: 'url-loader', options: { limit: '10000', mimetype: 'application/octet-stream' } }] 
     }, { 
      test: /\.otf(\?v=\d+\.\d+\.\d+)?$/, 
      use: [{ loader: 'url-loader', options: { limit: '10000', mimetype: 'application/font-otf' } }] 
     }, { 
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
      use: [{ loader: 'file-loader' }] 
     }, { 
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
      use: [{ loader: 'url-loader', options: { limit: '10000', mimetype: 'image/svg+xml' } }] 
     }, { 
      test: /\.js$/, 
      //loader: 'babel-loader', 
      //exclude: /node_modules/, 
      //use: [{ loader: 'babel-loader', options: { exclude: '/node_modules/' } }] 
      use: [{ loader: 'babel-loader' }] 
      //use: [{ loader: 'babel-loader', options: { cacheDirectory: true } }] 
     }, { 
      test: /\.png$/, 
      use: [{ loader: 'file-loader', options: { name: '[name].[ext]' } }] 
     }, { 
      test: /\.jpg$/, 
      use: [{ loader: 'file-loader', options: { name: '[name].[ext]' } }] 
     }, { 
      test: /\.gif$/, 
      use: [{ loader: 'file-loader', options: { name: '[name].[ext]' } }] 
     }], 
     }, 
    }; 

    if (TARGET === 'start' || !TARGET) { 
     module.exports = merge(development, common); 
    } 

    if (TARGET === 'build' || !TARGET) { 
     module.exports = merge(production, common); 
    } 

    if (TARGET === 'lint' || !TARGET) { 
     module.exports = merge(production, common); 
    } 

Answer 1

Chỉ cần sử dụng

module: { 
    rules: [ 
     { 
      test: /\.jsx?$/, 
      include: [ 
       path.resolve(__dirname, "app") 
       ], 
      exclude: [ 
       path.resolve(__dirname, "app/demo-files") 
      ] 
     } 
    ] 
} 

Để biết thêm ref: https://webpack.js.org/configuration/

Answer 2

Đây là cách chúng tôi đã nhận quá khứ cùng một vấn đề

{ 
    test: /\.js$/,   
    use: [{ 
    loader: 'babel-loader', 
    options: { 
     ignore: '/node_modules/'   
    } 
    }] 
} 

từ https://babeljs.io/docs/usage/api/

Answer 3

Thuộc tính trong webpack 2exclude vẫn giống như bạn thấy nhưng không cố gắng, nó hoạt động như chỉ có

module: { 
     loaders: [ 
     { 
      test: /\.jsx?/, 
      loader: 'babel-loader', 
      exclude: [/node_modules/] 
     }, 
    { 
     test: /\.(jpg|png|gif|eot|woff2|woff|ttf|ico|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: 'url-loader' 
    }, 
    { 
     test: /\.(js)$/, 
     loader: `babel-loader`, 
     exclude: [/node_modules/] 
    }] 
} 

Answer 4

Bạn đã nghĩ đến việc sử dụng externals trong webpack.config.js để bỏ qua các thư mục, mà trong trường hợp của bạn là "node_modules"

https://webpack.js.org/guides/author-libraries/#external-limitations