web-dev-qa-db-ja.com

Webpack 2-babel-loader-node_modulesを除外する方法は？

Webpack 2にアップグレードしたので、「ルール」に「除外」を含めることはできません。 「exclude」を「options」にも渡すことができませんでした。今それを行う正しい方法は何ですか？

前：

{
  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);
    }
javascriptbabelwebpack-2
6
Dmitry Shvedov

使用するだけ

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

詳細については： https://webpack.js.org/configuration/

7
Arun Redhu

これが私たちが同じ問題を乗り越えた方法です

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

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

4
Kaveh Nowroozi

webpack 2のexcludeプロパティは、表示したものと同じですが、試していません。そのように機能するだけです。

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/]
    }]
}
1
Pranav Singh

Webpack.config.jsでexternalsを使用してディレクトリを無視することを考えましたか？ 「node_modules」です

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

1
Tirtha