여러 로더가있는 웹팩 로더에 쿼리를 추가하는 방법은 무엇입니까?

여러 로더가있는 웹팩 로더에 쿼리를 추가하는 방법은 무엇입니까?

---

작동중인 Babel 로더가 있습니다.

{ test: /\.jsx?$/, loader: 'babel', query: babelSettings, exclude: /node_modules/ },

하지만 지금은 CoffeeScript 로더를 원하지만 Babel을 통해 파이프를 통해 멋진 HMR을 얻고 싶습니다.

{ test: /\.coffee$/, loader: 'babel!coffee', query: babelSettings, exclude: /node_modules/ },

그래도 작동하지 않으며 다음 오류가 발생합니다.

오류 : 로더 목록에서 '쿼리'및 여러 로더를 정의 할 수 없습니다.

로더 체인의 Babel 부분에 대해서만 쿼리를 정의하는 방법에 대한 아이디어가 있습니까? 쿼리는 복잡한 개체이며 인코딩 할 수 없다고 생각합니다.

var babelSettings = { stage: 0 };

if (process.env.NODE_ENV !== 'production') {
  babelSettings.plugins = ['react-transform'];
  babelSettings.extra = {
    'react-transform': {
      transforms: [{
        transform: 'react-transform-hmr',
        imports: ['react'],
        locals: ['module']
      }, {
        transform: 'react-transform-catch-errors',
        imports: ['react', 'redbox-react']
      }]
      // redbox-react is breaking the line numbers :-(
      // you might want to disable it
    }
  };
}

---

업데이트 : 비 레거시 버전의 Webpack 을 사용하면 Webpack 구성에서 로더 배열을 정의 할 수 있습니다 .

이전 버전의 Webpack을 사용하거나 옵션을 인라인으로 추가해야하는 경우 원래 답변은 다음과 같습니다.

---

이를 수행하는 방법은 query객체 키가 하나의 로더에 대해서만 작동 하므로 로더 문자열 자체에 쿼리 매개 변수를 설정하는 것입니다.

예제에서 알 수 있듯이 설정 개체를 JSON으로 직렬화 할 수 있다고 가정하면 설정 개체를 JSON 쿼리로 쉽게 전달할 수 있습니다. 그러면 Babel 로더 만 설정을 가져옵니다.

{ test: /\.coffee$/, loader: 'babel?'+JSON.stringify(babelSettings)+'!coffee', exclude: /node_modules/ }

이를 수행하는 기능은 여기에 다소 문서화되어 있습니다.

로더 사용 : 쿼리 매개 변수

대부분의 로더는 일반 쿼리 형식 ( ?key=value&key2=value2) 및 JSON 객체 ( ?{"key":"value","key2":"value2"}) 로 매개 변수를 허용 합니다 .

---

Webpack의 창시자 인 Sokra는 여기 에서이 작업을 수행하는 방법을 직접 제공 하지만 쿼리 개체로 단일 로더를 정의하는 것과 스타일이 더 유사한 webpack-combine-loaders 도우미를 사용하는 것이 더 나을 것입니다 .

를 사용하면 다음과 webpack-combine-loaders같이 여러 로더를 정의 할 수 있습니다.

combineLoaders([
  {
    loader: 'css-loader',
    query: {
      modules: true,
      sourceMap: true,
      localIdentName: '[name]__[local]--[hash:base64:5]',
    },
  },
  {
    loader: 'sass-loader',
    query: {
      sourceMap: true,
      includePaths: [
        'app/assets/stylesheets',
        'app/assets/stylesheets/legacy',
      ],
    },
  },
]);

---

webpack 2 및 3 에서는 훨씬 더 깔끔하게 구성 할 수 있습니다.

로더는 로더 개체의 배열로 전달할 수 있습니다. 각 로더 객체는 해당 특정 로더에 대해 options웹팩 1처럼 작동 하는 객체를 지정할 수 있습니다 query.

예를 들어, webpack 2 및 3 에서 일부 옵션 으로 구성된 react-hot-loader및 을 모두 사용babel-loaderbabel-loader

module: {
  rules: [{
    test: /\.js$/,
    exclude: /node_modules/,
    use: [{
      loader: 'react-hot-loader'
    }, {
      loader: 'babel-loader',
      options: {
        babelrc: false,
        presets: [
          'es2015-native-modules',
          'stage-0',
          'react'
        ]
      }
    }]
  }] 
}

비교를 위해 다음 은 쿼리 문자열 메서드를 사용하는 webpack 1 의 동일한 구성입니다 .

module: {
  loaders: [{
    test: /\.js$/,
    exclude: /node_modules/,
    loaders: [
      'react-hot',
      'babel-loader?' +
        'babelrc=false,' +
        'presets[]=es2015,' +
        'presets[]=stage-0,' +
        'presets[]=react'
      ]
  }] 
}

체인 아래에서 변경된 속성 이름을 확인하십시오.

Also, note that I changed the es2015 preset to es2015-native-modules preset in the babel-loader configuration. This has nothing to do with the specification of options, it's just that including es6 modules allows you to use the tree-shaking feature introduced in v2. It could be left alone and it would still work, but the answer would feel incomplete without that obvious upgrade being pointed out :-)

---

The test property is just regex, so you can run a check for both jsx and coffee at the same time: test: /\.(jsx|coffee)$/

Sass/SCSS is a little easier: test: /\.s[ac]ss$/

ReferenceURL : https://stackoverflow.com/questions/33117136/how-to-add-a-query-to-a-webpack-loader-with-multiple-loaders