從webpack開始建立一個新的react專案

我今年六歲發表於2020-11-05
WebReact

  1. 使用npm init -y 初始化一個package.json

  2. 建立src資料夾（專案檔案）和text資料夾（測試程式碼等）

  3. src中建立index.html以及index.js

  4. 安裝webpack

    cnpm i webpack webpack-cli -D

  5. 建立webpack.config.js

    寫入

    module.exports = {

 mode: "development", //可選的值為：`development` 和 `production`

 // webpack4.x中約定了打包的入口時候src -> index.js 出口是 dist -> main.js

};

  6. 安裝webpack-dev-server->實時編譯

    cnpm i webpack-dev-server -D

    在package.json中新增

    "scripts": {
 	 ...

 	 "dev": "webpack-dev-server --open --host 127.0.0.1 --port 4500 --hot --compress"

 },

    就可以使用npm run dev 跑起專案

  7. 給專案生成的記憶體中新增一個首頁，不然一進去看到的是專案的目錄結構，安裝html-webpack-plugin

    cnpm i html-webpack-plugin -D

    在webpack.config.js中寫入

    const path = require("path");

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

const htmlplugin = new HtmlPlugin({

 template: path.join(__dirname, "./src/index.html"), //指定模板檔案

 filename: "index.html", // 指定記憶體中生成的首頁名稱

});

module.exports = {

 mode: "development",

 // webpack4.x中約定了打包的入口時候src -> index.js 出口是 dist -> main.js

 plugins: [htmlplugin],

};

  8. 安裝靜態檔案處理的loader

    npm i url-loader file-loader -D

    在webpack.config.js中寫入

    module.exports = {
  ...
  module: {
    rules: [
      ....
      { test: /\.jpg|png|gif|bmp$/, use: "url-loader" }, //處理圖片
      { test: /\.ttf|svg|woff|woff2$/, use: "url-loader" }, //處理字型檔案
    ],
  },
};

  9. 安裝樣式的處理loader

    cnpm i style-loader css-loader -D
cnpm i sass-loader node-sass -D

    在webpack.config.js中寫入

    module.exports = {
  ...
  module: {
    rules: [
      ....
      { test: /\.css$/, use: ["style-loader", "css-loader"] }, //處理普通樣式表
      { test: /\.scss$/, use: ["style-loader", "css-loader?modules&localIdentName=[path][name]-[local]-[hashL:5]","sass-loader"] }, //處理普通樣式表
    ],
  },
};

  10. 安裝babel外掛

    cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D

  11. 安裝能夠識別轉換jsx語法的包

    cnpm i babel-preset-react -D

    建立.babelrc檔案，並新增

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

    新增babel-loader配置項，在webpack.config.js中寫入

    module: { //要打包的第三方模組
    rules: [
      { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
}

  12. 配置一些可以省略的字尾以及別名

    resolve: {
    extensions: [".js", ".jsx", ".json"],
    alias: {
      //別名-可以在檔案中用@符號代表這個路徑
      "@": path.join(__dirname, "./src"),
    },
  },

  13. 安裝react

    cnpm i react react-dom -S

  14. 在index.js中寫入

    import React from "react";
import ReactDOM from "react-dom";

// 匯入根元件
import App from "@/components/App";

// 呼叫方法渲染根元件
ReactDOM.render(
  <div>
    <App></App>
  </div>,
  document.getElementById("app")
);

    建立App.jsx

    import React, { Component } from "react";

export default class App extends Component {
  render() {
    return <div>App</div>;
  }
}

  15. 在index.html中寫入

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首頁</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

後面就是專案的詳細編寫了

相關文章