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') + '/']}
}
}),
]
};
모든 의견을 환영합니다.
감사합니다. 이 솔루션은 완벽하게 작동합니다! –
이것은 이전 버전의 webpack을 설치하는 종속성 때문에 발생할 수도 있습니다. create-react-app를 사용하는 경우 [이 스레드] (https://github.com/facebookincubator/create-react-app/issues/2352)를 참조하십시오. – BonsaiOak