[Webpack]: Möglicherweise benötigen Sie einen entsprechenden Loader, um mit dieser Datei zu arbeiten.

Question

Ich benutze React + Webpack. Ich habe den Fehler, You may need an appropriate loader to handle this file type. Danach SyntaxError: Unexpected token at ../../acorn.js.

Warum ist es mit acorn.js verwandt? Ich weiß auch nicht, wie ich es lösen soll. Ich denke, ich habe bereits Lader installiert, die ich brauchte. webpack.config.dev.js funktioniert gut, aber beim Versuch, webpack.config.prod.js Gebäude zu bauen, habe ich diesen Fehler.

mir meine Codes Lassen Sie zeigen ...

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" 
} 

Answer 1

nur Ihre Modullader transpile die .jsx Dateien, ändern der Testausdruck zum Transpilieren der .js Dateien sowie

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