Javascript 使用webpack加载.jsx文件
我在使用Javascript 使用webpack加载.jsx文件,javascript,reactjs,webpack,jsx,Javascript,Reactjs,Webpack,Jsx,我在使用webpack加载.jsx文件时遇到问题。 我有这个webpack.config.js: var webpack = require('webpack'); module.exports = { entry: "./static/js/storage/src/index.js", output: { path: './static/js/storage/public/', publicPath: "public/", fi
webpack
加载.jsx
文件时遇到问题。
我有这个webpack.config.js
:
var webpack = require('webpack');
module.exports = {
entry: "./static/js/storage/src/index.js",
output: {
path: './static/js/storage/public/',
publicPath: "public/",
filename: "bundle.js"
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: [/node_modules/, /public/],
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0', 'react']
}
},
{
test: /\.jsx$/,
loader: "react-hot!babel",
exclude: [/node_modules/, /public/]
}
]
}
};
我的申请有以下软件包:
"dependencies": {
"jquery": "^3.1.0",
"react": "^15.2.1",
"react-dom": "^15.2.1"
},
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel": "^6.5.2",
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-runtime": "^6.9.2",
"css-loader": "^0.23.1",
"file-loader": "^0.9.0",
"json-loader": "^0.5.4",
"jsx-loader": "^0.13.2",
"react": "^15.2.1",
"react-hot-loader": "^1.3.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.1"
}
当我尝试在控制台中运行webpack时,出现以下错误:
模块分析失败:
/static/js/storage/src/components/StorageApp.jsx
意外令牌(12:12)您可能需要适当的加载程序来处理
此文件类型无效
我的网页包无法加载jsx文件。我认为问题出在我的jsx加载器上。但我不知道确切的问题是什么
我试着使用react hot、babel loader和jsx loader,带有预设和无错误,但在所有情况下都是一样的。
此装载机不适用于:
test: /\.jsx$/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
},
有人能帮你解决这个问题吗?由于你在网页包设置中排除了“public”文件夹,编译器无法解析.jsx文件 更新您的网页包文件的下一行
exclude: [/node_modules/, /public/],
到
对于.js和.jsx加载程序。试试这个
loaders: [
{
test: /\.jsx?$/,
loader: "babel-loader",
exclude: [/node_modules/, /public/],
query: {
plugins: ["react-hot-loader/babel", 'transform-runtime'],
presets: ['es2015', 'stage-0', 'react']
}
}
]
我通过向每个导入的组件添加
.jsx
后期修复来解决这个问题,如下所示:
import Somthing from './Something.jsx'
它失败是因为基于错误的
exclude:[/node\u modules/,/public/]
。您可以尝试从列表中删除/public/
,看看这是否解决了问题。我更喜欢维护include
而不是exclude
我自己(白名单而不是黑名单),因为这样读起来更好。这能回答你的问题吗?
import Somthing from './Something.jsx'