前言

預備自己使用webpack與react搭建前端與後端分離的博客系統,在這個git上記錄我所有的步驟，以便自我學習與總結

基礎環境

node/npm

webpack

用於打包的工具，目前使用的是4.0

npm install webpack webpack-cli --save-dev

這就是安裝webpack,當然4.0開始在打包時需要安裝cli，注意–save-dev就是安裝在開發模式下的支援包，具體可以直接去看package.json這個文件又增加了什麼

react與babel

首先安裝react與react-dom，而且是瀏覽器中必須依賴的，因而後面要加–save

npm install react react-dom --save

此時，可以看到package.json中

 "devDependencies": {
    "babel-cli": "^6.26.0",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1"
  },
  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
  }

很明顯dev開頭的就是我們的開發模式。而dependcies就是我們正常的依賴，所以在此可以知道加–save-dev與–save的區別了。

es5與es6

隨着javascript的發展，語法有了越來越多的新特性，但是你的瀏覽器就不一定是支持最新特性的代碼，那麼babel就應運而生，用於進行es6轉換成es5,如es6中的箭頭函數就會被轉化成es5可以認識的函數等等。

npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

由於我使用的是webstorm進行編輯的，那麼可以使用babel官網提到的cli，具體請點鏈接

npm install --save-dev babel-cli

主要直接用命令行轉碼。

配置並啓動babel

別忘了配置Babel！在項目文件夾中創建一個名爲 .babelrc 的新文件

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": []
}

在config創建一個名爲 webpack.config.js 的文件，寫入

const path = require('path') //用於得到絕對路徑

const config = {
    entry:{
        blog:path.resolve(__dirname,'../src/app.js') //入口的源代碼
    },
    output:{
        filename:'[name].js',
        path: path.resolve(__dirname,'../output'),//輸出的源代碼
        //publicPath:''
    }
}

module.exports = config//這個一定不能忘記加

這樣就是webpack最簡單的打包工程。

那麼還需要的是如何運用babel-loader將js文件自動適配，於是在webpack.config.js中就需要創建一個規則來做這件事情。在webpack.config.js添加：

output:{
        filename:'[name].js',
        path: path.resolve(__dirname,'../output'),//輸出的源代碼
        //publicPath:''
    },
module:{
        rules:[
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader:"babel-loader" //使用babel-loader將es6轉換成ES5語法
                }

            }
        ]
    },

此時已經可以把babel-loader用起來，讓webpack可以識別js文件並通過babel-loader識別轉換

package.json添加webpack打包命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config config/webpack.config.js --mode development",
    "release": "webpack --config config/webpack.config.js --mode production"
  },

分別執行兩個操作，你會發現main.js不同的變化。production模式下，默認對打包的文件壓縮，打包更小。development模式下，對打包的文件不壓縮，同時打包的速度更快，webpack更新的優點就在這裏。
如果沒有指定任何模式，默認爲production模式。

注意：–config 配置文件路徑，字符串格式，默認是根目錄下的 webpack.config.js 或 webpackfile.js，

html-webpack-plugin 和 html-loader

要顯示React的頁面，我們必須告訴Webpack生成一個HTML頁面,同時將生成的打包出來的js將放在標籤內。這就需要webpack的插件html-webpack-plugin了

npm i html-webpack-plugin html-loader --save-dev

首先我們先創建一個模版文件index.html，放在public文件夾中。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>New React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

可以看到我們的div組件中的id爲root，目標就是替換掉這裏面的內容。
，那麼首先得知道如何使用這個插件。

在webpack中申明插件

const HtmlWebPackPlugin = require("html-webpack-plugin");

在webpack中添加插件配置

 plugins:[
        new HtmlWebPackPlugin({
            // title:"",//設置生成的html文件的標題
            filename: path.resolve(__dirname,'../output/index.html'),//生成的html文件名
            template: path.resolve(__dirname,'../public/index.html'),//根據自己指定的模版文件生成特定的html文件
            favicon: path.resolve(__dirname,'../static/favicon.ico'),//屬性值爲favicon文件所在的路徑
        })
    ],

具體可以參考本文

同時還要注意在webpack中的model rule，打包的時候要認到html文件，就需要使用html-loader

 {
       test:/\.html$/,
         use: [
             {
                loader: "html-loader",
                        options:{ minimize:true}
                 }
            ]
  }

minimize指是否要縮，這個去掉就是原來沒有壓縮過的html。

添加react源碼

環境都已經準備好了，那麼現在要做的是將react建立起來，在目錄下建立src文件夾用於存放react源碼。

還記得我們在webpack的配置嗎？在配置其入口函數的時候，entry所用的就是index.js,所以在這裏新建index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';

ReactDOM.render(<App />, document.getElementById('root'));

在這裏我們可以看到源碼中去找的是dom中的root，即html中的div組件id。
而真正的入口函數在app.js

import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div>
          helloword!
      </div>
    );
  }
}

export default App;

於是一個helloworld正式可以用了。

webpack-dev-server

如何進行自動的debug是我們開發週期中需要運用到的，特別是前端，我們先要看效果。而且每次都編譯一遍實在是效率低下，於是產生了一個新的插件。

npm i webpack-dev-server --save-dev

那麼如何設置呢。可以參考官方網站

devServer:{
        contentBase:path.resolve(__dirname,'../output'),
        compress:true,
        port:8000,
        host:'127.0.0.1',
        hot:true,
        overlay:{
            errors: true
        },
    }

在package.json中添加命令
“start”:“webpack-dev-server --config config/webpack.config.js --mode development --hot --inline”

注意，因爲webpack-dev-server是直接找當前內存中的

import React, {Component} from 'react';
import './style.css';
import Header from '../../components/Header/Header';
import Menus from '../../components/Menus/Menus';
import 'antd/dist/antd.css';

class Home extends Component{
    render() {
        return(
            <div className='container' >
                <Header/>
                <div className="nav">
                    <Menus />
                </div>
                <div className="main">
                    這裏是文章列表
                </div>
            </div>
        );
    }

}

export default Home;

上面是我寫好的代碼，來解析一波。
首先我們得設計一個header。header屬於一個組件，在這裏不詳細說react的組件化思想了，後續再跟大家嘮。
新建一個組件文件夾寫入

我的react學習之行-01webpack與react環境搭建

前言

基礎環境

webpack

react與babel

es5與es6

配置並啓動babel

package.json添加webpack打包命令

html-webpack-plugin 和 html-loader

添加react源碼

webpack-dev-server

我的Linux網絡內核之行1-基礎網絡知識

漫談android系統（4）bring up panel

Android Sensor詳解（3）porting drvier

漫談android系統(6)硬件抽象層kernel分析

嵌入式從入門到精通之移植uboot(1)--添加自己的板級包

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結