脚本宝典收集整理的这篇文章主要介绍了Webpack Babel React,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
package.json
{
"name": "giccoo",
"version": "1.0.0",
"main": "main.js",
"author": "Kelvin",
"license": "MIT",
"scripts": {
"dev": "webpack-dev-server --devtool eval-source-map --colors --hot --inline --content-base ./dist",
"build": "webpack --colors"
},
"dePEndencies": {
"path": "^0.12.7",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"webpack": "^3.8.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-PReset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"htML-webpack-plugin": "^2.30.1",
"webpack-dev-server": "^2.9.4"
}
}
Run code npm install
webpack.config.js
const path = require('path');
// const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['./src/main.js'],
output: {
path: path.resolve('dist'),
filename: '[name]-build.js'
},
module: {
loaders: [
{ test: /.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
]
},
watch: true
}
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';
if (document.getElementById('root')) {
ReactDOM.render(<App name="kelvin" />, document.getElementById('root'));
}
App.jsx
/*
./client/components/App.jsx
*/
import React from 'react';
const TEMP = "nice"
const MSUM = (i) => i + 1
export default class App extends React.Component {
constructor(props) {
super(props)
console.log(`${TEMP} job!`,MSUM(5),props)
this.props = props
}
render() {
return(
<div style={{textAlign: 'center'}}>
<h1>Hello World {this.props.name}</h1>
</div>
);
}
}
.babelrc
/*
./.babelrc
*/
{
"presets":[
"es2015", "react"
]
}
Run code npm run dev
以上是脚本宝典为你收集整理的Webpack Babel React全部内容,希望文章能够帮你解决Webpack Babel React所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。