使用webpack4.8搭建React的整個完整開發環境

首先在在你的項目中搭建如下目錄

運行 npm init -y 生成package.json

全局安裝如下腳本
cnpm i webpack webpack -g
cnpm i webpack webpack-cli -g
webpack4.0後,已經將webpack命令從webpack中分離出來,需要安裝webpack-cli
在index.js寫一些js
在webpack.config.js配置打包的mode如下,webpack4.0的最大特性是約定大於配置,少很多配置,這和java的springboot框架理念類似,這也是框架發展的趨勢

module.exports={
    //不配置默認爲 'production'
    mode:'development'
}

使用webpack 打包生成dist的main.js
在index.js 引入main.js

在index.html打開你的瀏覽器,可以看到webpack基本使用完畢

接下來配置react了 先解釋一下npm的指令
-S就是–save的簡寫，就行npm默認一個start的字段，你可以不必輸入npm run start 而只需輸入npm start，這兩個效果是一樣的。
-D就是–save-dev 這樣安裝的包的名稱及版本號就會存在package.json的devDependencies這個裏面，而–save會將包的名稱及版本號放在dependencies裏面。
運行腳本
cnpm i react react-dom -S

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

cnpm i babel-preset-react -D

創建,babelrc文件
添加.babelrc的配置

{
  "presets": ["env", "stage-0", "react"],
  "plugins": ["transform-runtime"]
}

在webpack.config.js配置如下

module.exports={
    //不配置默認爲 'production'
    mode:'development',
    module: { //要打包的第三方模塊
        rules: [
            { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
        ]
    }
}

這時候你就可以使用react的虛擬DOM了

在index.html添加如下

<div id="test1"></div>

在index.js添加

var vdom= <h1> React </h1>
ReactDOM.render(vdom,document.getElementById("test1"));

執行webpack指令打包,打開瀏覽器,可見,配置完畢

總是執行webpack打包有點麻煩 於是添加webpack-dev-server
運行cnpm i webpack-dev-server -g
在package.json下添加配置”dev”

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"
},

運行 npm run dev
可以看到webpack-server已經啓動,保存立馬更新並打開窗口

接下來配置樣式
運行如下腳本,添加引入的css樣式的
cnpm i style-loader css-loader -D
運行如下腳本,添加自定義的sass模塊化樣式
cnpm i sass-loader node-sass -D

我們需要引入如bootstrap的樣式在全局都生效,而我們自定義的樣式只在引入有效,並且不希望其通過組件的傳遞,使得關聯的組件的樣式都生效,故需要使用模塊化,爲了區分,建議自定義的樣式使用scss後綴

在webpack.config.js配置如下

const path = require('path')
module.exports = {
  mode: 'development', // development   production
  // 在 webpack 4.x 中，有一個很大的特性，就是 約定大於配置  約定，默認的打包入口路徑是 src -> index.js
  module: { 
    rules: [ 
      { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }, // 千萬別忘記添加 exclude 排除項
      { test: /\.css$/, use: ['style-loader', 'css-loader']}, 
      { test: /\.ttf|woff|woff2|eot|svg$/, use: 'url-loader' }, 
      //
      { test: /\.scss$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]', 'sass-loader'] }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'], 
    alias: { 
      '@': path.join(__dirname, './src') // 這樣，@ 就表示 項目根目錄中 src 的這一層路徑
    }
  }
}

最後,我們想要爲我們傳遞的props引入類型限制
運行如下腳本
cnpm i prop-types -S