“您可能需要一个适当的加载程序来处理这种文件类型”与 Webpack 和 Babel

我试图使用 Webpack 和 Babel 来编译 ES6资产，但是我得到了以下错误消息:

You may need an appropriate loader to handle this file type.
| import React from 'react';
| /*
| import { render } from 'react-dom'

下面是我的 Webpack 配置:

var path = require('path');
var webpack = require('webpack');


module.exports = {
entry: './index',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/dist/'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
}

下面是使用 Webpack 的中间件步骤:

var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var config = require('./webpack.config');


var express = require('express');
var app = express();
var port = 3000;


var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
noInfo: true,
publicPath: config.output.publicPath
}));


app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
});


app.listen(port, function(err) {
console.log('Server started on http://localhost:%s', port);
});

我的 index.js 文件所做的就是导入 response，但是看起来“ babel-loader”不起作用。

我正在使用‘ babel-loader’6.0。

494135 次浏览
小开
最佳答案

您需要安装 es2015预置:

npm install babel-preset-es2015

然后配置 babel-loader:

{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
小开

确保安装了 2015年巴别塔预设。

包裹 Json devDependency 的一个例子是:

"devDependencies": {
"babel-core": "^6.0.20",
"babel-loader": "^6.0.1",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"babel-preset-stage-0": "^6.0.15",
"webpack": "^1.9.6",
"webpack-dev-middleware": "^1.2.0",
"webpack-hot-middleware": "^2.0.0"
},

现在在 webpack 配置中配置 装载机:

{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }

在节点模块所在的项目根目录中添加一个 。巴贝尔文件:

{
"presets": ["es2015", "stage-0", "react"]
}

更多信息:

小开

如果您正在使用 Webpack > 3，那么您只需要安装 babel-preset-env，因为这个预设置涉及 es2015、 es2016和 es2017。

var path = require('path');
let webpack = require("webpack");


module.exports = {
entry: {
app: './app/App.js',
vendor: ["react","react-dom"]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '../public')
},
module: {
rules: [{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader?cacheDirectory=true',
}
}]
}
};

这将从我的 .babelrc文件中获取它的配置:

{
"presets": [
[
"env",
{
"targets": {
"browsers":["last 2 versions"],
"node":"current"
}
}
],["react"]
]
}
小开

使用打字稿时:

在我的例子中，我使用了 webpack v3.11文档页面中更新的语法 我只是从他们的网站复制了 css 和样式加载程序的配置。 注释掉的代码(较新的 API)导致此错误，请参见下面的内容。

  module: {
loaders: [{
test: /\.ts$/,
loaders: ['ts-loader']
},
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader'
]
}
]
// ,
// rules: [{
//     test: /\.css$/,
//     use: [
//         'style-loader',
//         'css-loader'
//     ]
// }]
}

正确的说法是:

    {
test: /\.css$/,
loaders: [
'style-loader',
'css-loader'
]
}

在加载程序属性的数组中。

小开

这个让我晕头转向。 角度7号，Webpack 我发现了这篇文章，所以我想把功劳归于这篇文章 Https://www.edc4it.com/blog/web/helloworld-angular2.html

解决办法是什么: //在您的组件文件上 Template: need (’./process.Component ent.html’)

等待因果报应来解读 Npm install add html-loader —— save-dev { Test:/. html $/, 用途: 「 html-loader 」 },

希望这对谁有帮助

小开

由于超时更新和更改，版本兼容性开始导致配置问题。

您的 webpack.config.js 应该是这样的，您还可以配置如何调整匹配。

var path = require('path');
var webpack = require("webpack");


module.exports = {
entry: './src/js/app.js',
devtool: 'source-map',
mode: 'development',
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"]
},{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
},
output: {
path: path.resolve(__dirname, './src/vendor'),
filename: 'bundle.min.js'
}
};

要注意的另一件事是参数的变化，您应该阅读巴别塔文档 https://babeljs.io/docs/en/presets

.babelrc


{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}

注意: 您必须确保在 package.json 依赖项中安装了上述@babel/preset-env &@babel/preset-response

小开

巴贝尔团队更新:

我们非常高兴您正在尝试使用 ES2015语法，但是团队推荐使用 babel-preset-env，而不是继续使用年度预设。默认情况下，将 ES2015 + 编译为 ES5的行为与前面的预设相同

如果使用 巴别塔第七版，则需要运行 npm install @ babel/preset-env，并在 .babelrc配置中使用“ presets”: [“@babel/preset-env”]。

这将把所有最新的特性编译成 第五季翻译的代码:

先决条件 :

  1. Webpack 4 +
  2. 巴别塔7 +

步骤1: : npm install —— save-dev@babel/preset-env

步骤2: 为了将 JSX代码编译成 es5，Babel 提供了 @babel/preset-react包将 reactjsx扩展文件转换成本地浏览器可理解的代码。

步骤3: npm install —— save-dev@babel/preset-response

步骤4: 在存在 webpack.config.js的项目的根路径中创建 .babelrc文件。

{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}

步骤5: webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'src/index.js'),
output: {
path: path.resolve(__dirname, 'output'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "./index.html"
})
]
}
小开

在我的例子中，由于导入路径是错误的，所以出现了这样的错误:

错: import Select from "react-select/src/Select"; // it was auto-generated by IDE ;)

正确: import Select from "react-select";

小开

您可能忘记在文件中添加 .js扩展名。

- > Component.js

小开

这让我觉得自己很蠢，但是我想为像我一样感到沮丧的人分享: 我使用了 webpack.dev.js，但是没有指定它作为配置文件！运行 Webpack 时，运行以下命令:

webpack --config webpack.dev.js

它突然起作用了;)

小开

只是增加了另一个原因，这样的错误显示 角度。.是因为我在样式列表中检查了 html 文件:

@Component({
selector: ...,
templateUrls: 'xyz.html',
stylesUrls: ['xyz.html']                  // problem
})

寻址错误的文件类型会引发此错误

小开

只要添加这个代码 webpackMix.js

mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css',  [
require('tailwindcss'),
]).vue();
小开

因为问题没有具体说明它是否为角度，反应，或反应本机。我张贴这为 react-native和它可能暗示了其他人。原因是它不能理解加载程序指定的语法。例如 tsx、 jsx。经过大量的探索，我在这个 文章中找到了一个解决方案。当我们使用使用 jsx的外部库并且您将您的项目配置为使用 tsx时，它不会理解 jsx并且会给您添加适当的加载程序。因此，您可以通过在 app.json文件中执行以下代码来修复这个问题。

"web": {
"build": {
"babel": {
"include": [
"name-of-my-shared-package-here"
]
}
}
}

用导致问题的包名替换 name-of-my-shared-package-here将解决这个问题。您可以检查导致此问题的包名称是否有错误。


提交答案