webpack 4.X 建立 react項目

時間 2019-11-10

原文原文鏈接

1. 新建一個文件夾
2. 運行 npm init -y 快速初始化項目
3. 在跟目錄建立src文件夾 dist文件夾
4. 在src下建立 index.html main.jshtml

//  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 node

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/ }
    ]
  }
}