2017-03-13 1 views
3

Webpack2를 사용하여 파일을 컴파일했을 때. Webpack 2를 해결하는 방법 loaderUtils.parseQuery() 경고?

내가 github의 페이지를 확인하고 방법을 찾을 수 없습니다 "loaderUtils.parseQuery은() 문제가 될 수있는 문자열이 아닌 값을받은이, https://github.com/webpack/loader-utils/issues/56 참조"에는 다음과 같은 경고를 보여 주었다 이 문제를 해결하십시오. 이것은 내 설정입니다.

// webpack 2 configuration 
// https://webpack.js.org/guides/migrating/ 

const webpack = require('webpack'); 
const path = require('path'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    watch: true, 
    inline: true, 
    resolve: { 
    modules: [ 
     'node_modules', 
     path.resolve(__dirname, './app'), 
    ], 
    //http://webpack.github.io/docs/configuration.html#resolve-alias 
    alias: { 
     lib: path.resolve('./lib'), 
     res: path.resolve('./res'), 
     style: path.resolve('./style'), 
     //make sure it can be load by 'jquery' 
     jquery$: 'jquery', 
     // 01/26/2017 http://isotope.metafizzy.co/extras.html#webpack 
     masonry: 'masonry-layout', 
     isotope: 'isotope-layout' 
    }, 
    extensions: ['.js', '.json', '.jsx', '.css'], 
    }, 
    devtool: 'source-map', 
    target: 'web', // enum 

    entry: { 
    // entry points 
    app: path.resolve('./app') + '/' + 'main.js', 
    //for basic stable library only 
    vendor: ['babel-polyfill', 'jquery', 'lodash', 'react', 'react-dom', 'bootstrap-sass', path.resolve('./app') + '/' + 'vendor.js'], 
    }, 
    output: {path: path.resolve('./script'), publicPath:'script/', filename: '[name].js', /*chunkFilename: '[id].js'*/}, 
    module: { 
    rules: [ 
     { 
     test: /.jsx?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     }, 
     { 
     // test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/, 
     // loader: 'file' 
     // https://github.com/webpack/webpack/issues/597 
     test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/, 
     loader: 'url-loader' 
     }, 
     // NOTICE: png/jpg needs specific loaders, see https://github.com/webpack-contrib/css-loader 
     { 
     test: /\.png$/, 
     loader: 'url-loader', 
     options: {limit: 100000}, 
     }, 
     { 
     test: /\.jpg$/, 
     loader:'file-loader' 
     }, 
     { 
     test: /\.s?css$/, 
     // https://css-tricks.com/css-modules-part-2-getting-started/ 
     // css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5] 
     loader: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: 'css-loader!sass-loader', 
     }) 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({name:'vendor', filename:'vendor.js'}), 
    //export to global for bootstrap and etc. (needs jquery ^2.0) 
    new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery'}), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     warnings: false, 
     }, 
     output: { 
     comments: false, 
     } 
    }), 
    // http://webpack.github.io/docs/stylesheets.html 
    // https://github.com/webpack/webpack/tree/master/examples/multiple-entry-points-commons-chunk-css-bundle 
    new ExtractTextPlugin({filename: '[name].css'}), 
    new webpack.LoaderOptionsPlugin({ 
     debug: true, 
     // test: /\.xxx$/, // may apply this only for some modules 
     options: { 
     // for @import path in the style file 
     sassLoader: {includePaths: [path.resolve('./style') + '/']} 
     } 
    }), 
    ] 
}; 

모든 의견을 환영합니다.

답변

8

loaderUtils.parseQuery()은 로더에게 전달되는 옵션을 얻기 위해 로더에 의해 사용됩니다. 그것은 loaderUtils.getOptions()으로 대체되었습니다. 아마도 parseQuery을 사용하는 로더를 사용하고있을 것입니다. webpack config에서 사용중인 모든 로더는 getOptions으로 변경되어야하지만 변경 사항이 포함되지 않은 이전 버전을 사용 중일 수 있습니다. 이 문제를 해결하려면 단순히 로더를 최신 버전으로 업그레이드하면됩니다. 어떤 이유로 모든 로더를 업그레이드하지 않는 경우

, 당신은 (하지 옵션으로)를 웹팩 설정 파일 내부에 다음 줄을 추가 할 수 있습니다

process.traceDeprecation = true; 

이 당신에게 스택 추적을 줄 것이다 parseQuery이 사용되므로 실제로 사용하는 로더를 식별하고 해당 로더를 업그레이드 할 수 있습니다.


그것은이 다음 주요 버전에서 변경됩니다, 최신 babel-loader 여전히 parseQuery를 사용하는 것으로 나타났다 그리고 v7.0.0-alpha에서 이미 사용할 수 있습니다. 그러나 알파 버전을 사용하고 싶지 않으면 v7.0.0이 나올 때까지 경고와 함께 살아야합니다.

+0

감사합니다. 이 솔루션은 완벽하게 작동합니다! –

+0

이것은 이전 버전의 webpack을 설치하는 종속성 때문에 발생할 수도 있습니다. create-react-app를 사용하는 경우 [이 스레드] (https://github.com/facebookincubator/create-react-app/issues/2352)를 참조하십시오. – BonsaiOak

관련 문제