webpack 4.X 创建 react项目

1. 新建一个文件夹
2. 运行 npm init -y 快速初始化项目
3. 在跟目录创建src文件夹 dist文件夹
4. 在src下创建 index.html main.js

//  index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>  
</body>
</html>

// main.js
import React from 'react'
import ReactDOM from 'react-dom'
// let myh2 = React.createElement('h2',{title:'123'},'我就是h2')
let {nam} = {nam:'小明1234556', sex: '男'}
// let obj0 = {age:15, ...obj}
// console.log(obj0)
// let {age} = obj0
let a = () => { 
  return 123
}
let aa =a()
// let a = function(){ 
//   return 123
// }

let myh2 = <h3>我就h3{aa}{nam}</h3>

ReactDOM.render(myh2, document.querySelector('#app'))

5. 运行 `npm i webpack -D` // 基础
5. 运行 `npm i webpack-cli -D` // 可以使用 npm run dev
6. 运行 `npm i webpack-dev-server -D` // 为了起服务
7. package.js 下写 dev: "webpack-dev-server"
8. 根目录创建 webpack.config.js  

const htmlWebpackPlugin = require("html-webpack-plugin")
const path = require("path")
module.exports = {
  mode: "development",
  entry: "./src/main.js",
  plugins: [
    new htmlWebpackPlugin({
      template: "./src/index.html"
    })
  ],
  devServer: {
    port: 8886
  },
  module: { //要打包的第三方模块
    rules: [
      { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
  }
}

9. 配置 babel

 　　1. 运行  npm  babel-loader @babel/core  -D  // 核心  

　　2. 运行  npm  @babel/preset-env    "@babel/preset-react"  -D    

 

　　　

 

posted @ 2019-05-30 15:16  Sugеr  阅读(148)  评论(0)    收藏  举报