Webpack 2:您可能需要一个合适的加载程序来处理此文件类型React
问题描述:
我检查过我的配置和程序包多次,无法弄清楚最新情况。似乎webpack忽略了我的babelrc文件,但我也尝试在我的配置中使用presets
选项,但仍无法将其转换为Transact-React。从巴贝尔CLI命令行做它工作正常:Webpack 2:您可能需要一个合适的加载程序来处理此文件类型React
webpack.config.js
var path = require('path');
const config = {
entry: './frontend/app.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.(js || jsx)$/,
use: 'babel-loader',
include: path.resolve(__dirname, 'frontend')
}
],
}
};
module.exports = config;
.babelrc
{
"presets": [
["es2015", {"modules": false}],
"react",
"stage-0"
],
"plugins": [
["module-resolver", {
"root": ["./frontend"],
"alias": {
"actions": "actions",
"components": "components",
"reducers": "reducers",
"stores": "stores",
"utils": "utils"
}
}]
],
"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}
的package.json
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "./frontend/app.js",
"scripts": {
"test": "jest",
"build": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.14.1",
"fetchr": "^0.5.36",
"fluxible": "^1.2.0",
"fluxible-action-utils": "0.2.4",
"fluxible-addons-react": "0.2.8",
"fluxible-reducer-store": "^0.1.0",
"immutable": "^3.8.1",
"keymirror": "^0.1.1",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-router": "^3.0.2"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.22.2",
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-module-resolver": "^2.5.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"jest": "^18.1.0",
"webpack": "^2.2.1"
}
}
答
/\.(js || jsx)$/
是表情都不怎么正常工作。你的意思是
/\.(js|jsx)$/
哇,我很迟钝。这就是我得到的复制和粘贴正则表达式 – unruffledBeaver
这是一个更简洁:/\.jsx?$/ – domehead100
是的,各种选项。我只是保持它与原来的相似。 – loganfsmyth