Webpack和Babel“您可能需要适当的加载器来处理此文件类型”


106

我正在尝试将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文件正在做的事情是导入react,但是似乎“ babel-loader”无法正常工作。

我正在使用'babel-loader'6.0.0。


1
我有同样的问题。babel-preset-es2015已安装,但在ReactDOM.render()调用中使用JSX仍然存在问题:s
SomethingOn

文件的扩展名是什么?它们是js文件还是jsx文件?您的加载程序仅考虑带有jsx扩展名的文件,这可能是问题所在
cubbuk

在这个环节您的问题将是100%解决[ stackoverflow.com/questions/50149729/...
迈赫达德Masoumi

在此链接,您的问题将100%解决了将css导入到next.js的问题
Mehrdad Masoumi

Answers:


86

您需要安装es2015预设:

npm install babel-preset-es2015

然后配置babel-loader

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

37
我已经安装了预设,还安装了babel-loader。它仍然给出相同的错误
Umang Gupta

@UG_您将不得不问一个单独的问题。我们需要查看您的整个配置和完整的错误消息。
loganfsmyth '16

1
@UG_您找到解决方案了吗?
萨拉斯朗特(Sarasranglt)

34

确保已安装es2015 babel预设

一个示例package.json devDependencies是:

"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配置中配置babel-loader

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

.babelrc文件添加到项目的节点模块所在的根目录:

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

更多信息:


1
。babelrc文件是我所缺少的,谢谢!这是完整的教程,公认的答案只能帮助您到此为止。
迈克

附带信息:不确定选项中的“ stage-0”(也可以在.babelrc中配置):某些功能可能未在官方ES-Standard中实现,因此我通常使用更安全的“ stage-3”。
ChristofKälin'17

11

如果您使用的是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"]
    ]
}

1

由于更新和超时更改,版本兼容性开始引起配置问题。

您的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'
  }
};

要注意的另一件事是args的更改,您应该阅读babel文档https://babeljs.io/docs/en/presets

.babelrc

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

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


1
添加@babel/preset-react为我修复。
kyw

1

BABEL团队更新:

我们很高兴您尝试使用ES2015语法,但建议不要使用逐年预设,而是建议使用babel-preset-env。默认情况下,其行为与以前的预设相同,可将ES2015 +编译为ES5

如果您使用的是Babel版本7,则需要运行npm install @ babel / preset-env并在配置中包含“预设”:[“ @ babel / preset-env”] .babelrc

这会将所有最新功能编译为es5转码:

先决条件

  1. Webpack 4+
  2. 通天塔7+

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

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

第三步: npm install --save-dev @ babel / preset-react

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

{
  "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"
         })
    ]
}

0

使用打字稿时:

就我而言,我从他们的文档页面使用了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'
        ]
    }

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


0

这个让我大吃一惊。Angular 7,Webpack我找到了这篇文章,所以我想赞一下这篇文章 https://www.edc4it.com/blog/web/helloworld-angular2.html

解决方案是://在您的组件文件上。使用模板作为webpack会将其视为文本模板:require('./ process.component.html')

为了使业力解释为npm install add html-loader --save-dev {test:/.html$/,use:“ html-loader”},

希望这对某人有帮助

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.