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$/,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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!