我能够使用 public/src/index.js
编译和运行react应用程序 . 我想在 public/design/albert/js
中创建一个完全不同的js文件构建 . 当我尝试编译文件时,我得到解析错误
我的问题是:
-
如何使用目录中的入口点构建自定义目录(例如
public/design/albert/js/index.js
? I'm having difficulty understanding multiple endpoints -
如何让babel-loader预设做出反应合作?
I'd like as a result a separate build inside the dist folder from the code in albert/js that I can include in my scripts tag (I'm not using nodejs)
这是我运行的webpack命令:
node_modules/.bin/webpack design/albert/js/index.js separate.js
我得到 (it seems the babel-loader is not functioning) :
模块构建失败:SyntaxError:意外的令牌(9:7)
7 | render(){
8 | return (
> 9 | <div className="person">
| ^
10 | </div>
11 | )
12 | }
这是我的 design/albert/js/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import Person from './person';
class App extends React.Component{
render(){
return (
<div className="person">
<Person />
</div>
)
}
}
ReactDOM.render(<App />,document.querySelector("#app"));
//serviceWorker.unregister();
serviceWorker.register();
这是我的 design/albert/js/person.js
:
import React from 'react';
import ReactDOM from 'react-dom';
class Person extends React.Component{
render(){
return (
<div className="person">
<h1>Hello, I'm Jonathan</h1>
</div>
)
}
}
export default Person;
这是我的 webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
devtool:'cheap-module-eval-source-map',
entry: ['./src/index'],
output: {
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js',
publicPath: ''
},
resolve:{
extensions:['.js','.jsx']
},
module:{
rules:[
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
]
},
//plugins:[new HtmlWebpackPlugin()]
};
这是我的 .babelrc
{
"presets":[
["env",{
"targets":{
"browsers":[
"> 1%",
"last 2 versions"
]
}
}],
"react"
],
"plugins": [
"transform-class-properties"
]
}
1 回答
在
webpack.config.js
文件中,您可以尝试以下方法: