如何解决webpack2错误:您可能需要一个适当的加载器来处理这种文件类型?
我想将我的reactjs/webpack/gulp应用程序转换为webpack2。我使用来自该项目的webpackconfig + .babelrc文件的package.json为出发点:如何解决webpack2错误:您可能需要一个适当的加载器来处理这种文件类型?
https://github.com/ModusCreateOrg/budgeting-sample-app-webpack2
这是gulpcode:
var gulp = require('gulp');
var webpackStream = require('webpack-stream');
var webpack2 = require('webpack');
gulp.task('default', function() {
return gulp.src('app/app.js')
.pipe(webpackStream({/* options */}, webpack2))
.pipe(gulp.dest('dist/'));
});
当我运行“吞掉”我得到这个错误:
stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: ./app/app.js
Module parse failed: C:\myapp\app\app.js Unexpected token (11:4)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
| <Provider>
| <App />
| </Provider>,
我需要哪一个加载器?我在哪里配置?
你实际上并没有使用webpack.config.js
,所以大概你在配置Gulpfile中的选项。但是您将选项评论为/* options */
,这是您实际配置webpack的重要位置。
您可以在module.rules
下的这些选项中配置装载机(另请参阅Concepts - Loaders)。在你的情况下,你需要babel-loader
和babel-preset-react
能够传输JSX语法,预设应该已经在你正在使用的.babelrc
配置中。你只需要在加载程序添加到在Gulpfile你的选择,使您的.js
和.jsx
文件通过加载器传递(使用相同rule在你的链接项目):
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
'babel-loader'
],
}
]
}
而是定义选项在你的Gulp文件中,你可以定义一个webpack.config.js
,然后只需要它并将它传递给webpackStream
。当你直接使用webpack(没有Gulp)的时候,这个文件会自动使用,所以如果你想在Gulp之外运行它,这个配置非常方便。熟悉webpack是个好主意。一个好的起点是官方文档的Core Concepts。
通常会导出一个对象,您可以直接在webpackStream
中使用该对象,但是在链接的项目中,会导出一个函数,该函数根据所使用的环境返回配置对象。要直接使用它在你的Gulpfile你会做到以下几点:
var gulp = require('gulp');
var webpackStream = require('webpack-stream');
var config = require('./webpack.config');
gulp.task('default', function() {
return gulp.src('app/app.js')
.pipe(webpackStream(config()))
.pipe(gulp.dest('dist/'));
});
config()
返回的开发选项,并获得生产配置你需要调用config({ prod: true })
。你可能不想使用完全的配置,而是使用你自己的配置,你可以直接导出为一个普通的对象,所以你不需要调用一个函数。
嗨迈克尔,现在我有一个入口文件的问题:我已经指定在吞咽任务和webpack.config。条目:{ js:'app.js', vendor:['react'] }, –
错误是:Error:Entry module not found:Error:Can not resolve module'app.js' –
您可以删除'来自'webpack.config.js'的'入口'。这是我提到你可能不想使用完整配置的原因之一。配置是直接与webpack配合使用,而不是与Gulp配合使用。 –