[Webpack] :이 파일을 처리하기 위해 적절한 로더가 필요할 수 있습니다.

React + Webpack을 사용합니다. 오류가 발생했습니다. SyntaxError: Unexpected token at ../../acorn.js.[Webpack] :이 파일을 처리하기 위해 적절한 로더가 필요할 수 있습니다.

왜 acorn.js와 관련이 있습니까? 또한, 나는 그것을 해결하는 방법을하지 않습니다. 나는 내가 필요한 로더를 이미 설치했다고 생각한다. webpack.config.dev.js이 잘 작동하지만 webpack.config.prod.js 건물을 만들 때이 오류가 발생합니다.

내 코드를 보여 드리죠 ...

webpack.config.prod.js

module: { 
    loaders: [ 
    { 
     test: /\.jsx$/, 
     loader: 'babel', 
     exclude: /node_modules/, 
     query: { 
     presets: ['react', 'es2015', 'stage-1'] 
     } 
    }, 
    { 
     test: /\.css$/, 
     loaders: ['style', 'css'] 
    }, 
    { 
     test: /\.png$/, 
     loader: "url-loader?limit=100000" 
    }, 
    { 
     test: /\.jpg$/, 
     loader: "file-loader" 
    }, 
    { 
     test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url?limit=10000&mimetype=application/font-woff' 
    }, 
    { 
     test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url?limit=10000&mimetype=application/octet-stream' 
    }, 
    { 
     test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'file' 
    }, 
    { 
     test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url?limit=10000&mimetype=image/svg+xml' 
    }, 
    { 
     test: /\.gif$/i, 
     loaders: [ 
     'file?hash=sha512&digest=hex&name=[hash].[ext]', 
     'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false' 
     ] 
    }, 
    { 
     test: /\.json?$/, 
     loader: 'json' 
    } 
    ] 
}, 

resolve: { 
    root: [ 
    path.resolve('./src'), 
    path.resolve('./style') 
    ], 
    extensions: ['', '.js', '.jsx', '.css'] 
}, 

plugins: [ 
    new HtmlWebpackPlugin({ 
    tempalte: './public/index.html' 
    }), 
    new webpack.DefinePlugin({ 
    'process.env':{ 
     'NODE_ENV': JSON.stringify('production') 
    } 
    }), 
],

package.json

"devDependencies": { 
    "babel-core": "^6.22.1", 
    "babel-loader": "^6.2.10", 
    "babel-preset-es2015": "^6.22.0", 
    "babel-preset-react": "^6.22.0", 
    "babel-preset-stage-0": "^6.22.0", 
    "css-loader": "^0.26.1", 
    "file-loader": "^0.10.0", 
    "html-webpack-plugin": "^2.28.0", 
    "image-webpack-loader": "^3.2.0", 
    "json-loader": "^0.5.4", 
    "style-loader": "^0.13.1", 
    "url-loader": "^0.5.7", 
    "webpack": "^1.12.9", 
    "webpack-dev-server": "^1.14.0" 
}, 
"dependencies": { 
    "axios": "^0.15.3", 
    "bootstrap": "^3.3.7", 
    "core-js": "^2.4.1", 
    "lodash": "^4.17.4", 
    "path": "^0.12.7", 
    "react": "^15.4.2", 
    "react-bootstrap": "^0.30.7", 
    "react-bootstrap-table": "^3.1.7", 
    "react-dnd": "^2.2.3", 
    "react-dnd-html5-backend": "^2.2.3", 
    "react-dom": "^15.4.2", 
    "react-js-pagination": "^2.0.2", 
    "react-modal": "^1.7.3", 
    "react-redux": "^5.0.2", 
    "react-router": "^3.0.2", 
    "react-slick": "0.14.5", 
    "react-toastr": "^2.8.2", 
    "redux": "^3.6.0", 
    "redux-form": "^6.5.0", 
    "redux-promise": "^0.5.3", 
    "redux-thunk": "^2.2.0", 
    "slick-carousel": "^1.6.0" 
}

출처

2017-05-22 Nyeon Kim

로더라고 생각하지 마십시오. 아마 그 도토리를 깨뜨릴거야 .js. 로더가 고장 나면 그 결과입니다. 도토리를 닮은 것은 아무것도 없어. 너의 소포에 들어 있니? 설치 했습니까? – stevenvanc

'npm install'을했을 때 @stevenvanc, acorn.js가 설치되었지만 설치 이유를 모르겠습니다. –

로더는'.jsx' 파일 만 추출하고, 바벨 로더는'/ \ .jsx? $ /, '를 시도합니다 –

모듈 로더에만 .jsx 파일 transpile 변경 시험 표현은 .js 파일도 마찬가지입니다.

loaders: [ 
    { 
     test: /\.jsx?$/, 
     loader: 'babel', 
     exclude: /node_modules/, 
     query: { 
     presets: ['react', 'es2015', 'stage-1'] 
     } 
    },

출처

2017-05-22 04:02:32

[Webpack] :이 파일을 처리하기 위해 적절한 로더가 필요할 수 있습니다.

답변

관련 문제