Webpack 2 - babel-loader - 如何排除 node_modules?

新手上路,请多包涵

由于我升级到 Webpack 2,我的“规则”中不能有“排除”。也无法将“排除”传递给“选项”。现在正确的做法是什么?

前:

 {
  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);
    }

原文由 Dmitry Shvedov 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 688
1 个回答

只需使用

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

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

原文由 Arun Redhu 发布,翻译遵循 CC BY-SA 3.0 许可协议

推荐问题