[英]Creating webpack bundle from custom directory files
I am able to compile and run a react application using public/src/index.js
. 我能够使用
public/src/index.js
编译并运行React应用程序。 I want to create a completely different build from js files within public/design/albert/js
. 我想从
public/design/albert/js
js文件创建一个完全不同的构建。 When I try compiling the file I get parse errors 当我尝试编译文件时,出现解析错误
My questions are: 我的问题是:
How do I build custom directory with an entry point in the directory (such as public/design/albert/js/index.js
? I'm having difficulty understanding multiple endpoints 如何使用目录中的入口点构建自定义目录(例如
public/design/albert/js/index.js
? 我很难理解多个端点
How do I get babel-loader preset react to cooperate? 我如何使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) 因此,我想要在dist文件夹中与albert / js中的代码建立一个单独的构建,并将其包含在脚本标签中(我不使用nodejs)
Here is the webpack command I ran: 这是我运行的webpack命令:
node_modules/.bin/webpack design/albert/js/index.js separate.js
I get (it seems the babel-loader is not functioning) : 我得到(看来babel-loader无法正常运行) :
Module build failed: SyntaxError: Unexpected token (9:7) 模块构建失败:SyntaxError:意外令牌(9:7)
7 | render(){
8 | return (
> 9 | <div className="person">
| ^
10 | </div>
11 | )
12 | }
Here's my design/albert/js/index.js
这是我的
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();
Here's my design/albert/js/person.js
: 这是我的
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;
Here's my webpack.config.js
这是我的
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()]
};
Here's my .babelrc
这是我的
.babelrc
{
"presets":[
["env",{
"targets":{
"browsers":[
"> 1%",
"last 2 versions"
]
}
}],
"react"
],
"plugins": [
"transform-class-properties"
]
}
In your webpack.config.js
file you can try something like this: 在您的
webpack.config.js
文件中,您可以尝试执行以下操作:
...
entry: {
'bundle_1': 'src/index.js',
'bundle_2': 'design/albert/js/index.js'
},
output: {
filename: '[name].js'
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.