2017-03-07 161 views
6

由於我升級到了Webpack 2,所以在我的「規則」中不能有「排除」。無法將「排除」傳遞給「選項」。現在做什麼是正確的方式?Webpack 2 - babel-loader - 如何排除node_modules?

前:

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

現在:

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

整體配置:

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); 
    } 
+1

的'exclude'屬性尚未在改變的WebPack到webpack.config.js忽略目錄,而你的情況是「node_modules」 2.你的問題很可能是在別處在配置中。但爲了能夠幫助你,你需要提供你的配置。 –

+1

@MichaelJungo再次,現在突然就沒有錯誤的編譯,而在此之前它有關規則條文不支持的令牌專門抱怨的嘗試。去搞清楚... –

回答

7

只需使用

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

更多參考:https://webpack.js.org/configuration/

4

這就是我們如何得到過去同樣的問題

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

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

1

webpack 2exclude性質仍然是一樣的,你顯示,但沒有嘗試過,它就像只有

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/] 
    }] 
} 
相關問題