![](/img/trans.png)
[英]“You may need an appropriate loader to handle this file type” with Webpack and Babel
[英]You may need an appropriate loader to handle this file type babel and webpack
因此,我的文件结构非常简单。
〜
/dist
/node_modules
/src
.babelrc
index.js
package.json
webpack.config.js
我要完成的工作是尝试运行“ webpack”命令,然后将其编译到dist文件夹中。 然后,我将module.export出来使用它。
但是,我一直遇到这个错误,该错误表明我可能需要这种文件类型的适当加载程序。 我觉得好像我需要开发所有我的开发包一样。
这是我的以下webpack.config.js以及package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-preset-stage-1": "^6.24.1",
"lodash": "^4.17.4",
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"jsx-loader": "^0.13.2",
"webpack": "^3.5.6",
"webpack-dev-server": "^2.8.1"
}
}
module.exports = {
entry: [
'./src/components/select.jsx'
],
output: {
path: __dirname + /dist/,
publicPath: '/',
filename: 'form-field.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-1']
}
}]
},
resolve: {
extensions: ['.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
您在加载程序中不允许使用任何文件类型。 添加一个test
密钥。
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
}]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.