Webpack4|Redux|React问题-您可能需要适当的加载器来处理此文件类型
我正在尝试Webpack4/Redux/React，并在我的示例应用程序中得到以下错误：
./src/index.js] 210字节{main}构建了1个错误+ 13个隐藏模块
./src/index.js模块分析错误失败:意外标记(3:16)您可能需要适当的加载器来处理此文件类型。|从‘React’导入react；|| const元素=
你好，世界
；|@ multi webpack-dev-server/client?http://localhost:3000 webpack/hot/only-dev-server。/src/index I“wdm”：编译失败。
我已经尝试了不同的方法来解决这个问题(从注释掉的代码中可以明显看出)，但都没有成功。请让我知道我错过了什么。我的代码文件如下：
Package.json:
{
"name": "react-redux-example",
"version": "1.0.0",
"description": "using redux architecture",
"main": "node server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git"
},
"keywords": [
"reactjs",
"redux",
"react",
"hot",
"reload",
"live",
"edit",
"webpack"
],
"author": "newbieToReact",
"license": "MIT",
"dependencies": {
"babel": "^6.23.0",
"mkdirp": "^0.5.1",
"react": "^16.4.0",
"react-router": "^4.2.0",
"style-loader": "^0.21.0",
"webpack": "^4.10.2",
"webpack-dev-server": "^3.1.4"
},
"devDependencies": {
"extract-text-webpack-plugin": "^4.0.0-beta.0"
}
}webpack.config.js
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var devFlagPlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'true'))
});
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/index'
],
mode: "development",
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
//new webpack.NoErrorsPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
devFlagPlugin,
new ExtractTextPlugin('app.css')
],
// module: {
// loaders: [
// {
// test: /\.jsx?$/,
// loaders: ['react-hot', 'babel'],
// include: path.join(__dirname, 'src')
// },
// { test: /\.css$/, loader: ExtractTextPlugin.extract('css-loader?module!cssnext-loader') }
// ]
// },
//module: {
// rules: [
// {
// exclude: '/node_modules/',
//test: /\.jsx?$/,
//test: /\.js$/,
// test: /\.(js|jsx)$/,
// include: path.join(__dirname, 'src'),
// test: /\.css$/,
// use: [
// { loader: "react-hot" },
// { loader: "babel" },
// { loader: "ExtractTextPlugin.extract('css-loader?module!cssnext-loader')"},
// { loader: "style-loader" },
// ]
// }
// ]
// },
module: {
rules: [
{
exclude: '/node_modules/',
test: /\.(js|jsx)$/,
include: path.join(__dirname, 'src'),
test: /\.css$/,
loader: "react-hot",
loader: "babel",
loader: "ExtractTextPlugin.extract('css-loader?module!cssnext-loader')",
loader: "style-loader",
}
]
},
resolve: {
extensions: ['.js', '.json']
}
};Index.js源/
import React from 'react';
const element = <h1>Hello, world</h1>;回答 2
Stack Overflow用户
发布于 2018-05-31 17:13:11
您的module/loaders需要test:中的另一个子句，该子句必须为test: /\.(js|jsx)$/,，因为您使用的是.js文件而不是.jsx。此外，在使用.js而不是.jsx时，最好在您的配置中包含以下内容：resolve: { extensions: ['.js'] },。另外，取消第二个加载器的注释，因为我看到你正在使用一个需要css-loader工作的.css。
您还必须将css-loader和babel-loader添加到devDependencies中。
另外，您使用的是webpack 4，这意味着ExtractTextPlugin已被弃用，因此请删除它。
希望这对你有帮助，祝你好运！
Stack Overflow用户
发布于 2018-05-31 17:38:13
在webpack.config.js中，您应该遵循webpack docs中描述的方案
下面是一个例子
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
}, {
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}]https://stackoverflow.com/questions/50620556
复制相似问题