Webpack4.X搭建基於typescript的react工程並擼一套我的的腳手架（一）

說明：本文代碼區域中的 「+」表示新增，「-」表示刪除，「M」表示修改。

1.初始化項目

• 新建一個項目

mkdir webpack-react-demo
複製代碼

• 進入到新建立的項目目錄下

cd webpack-react-demo
複製代碼

• 初始化項目

npm init -y (或者npm init)
複製代碼

npm init會有命令詢問，你能夠根據本身的須要輸入相應的內容，或者一路Enter執行下去。

• 修改package.json文件

  • 刪除入口："main":"index.js"
  • 添加私有選項，以確保安裝包是私有的，防止意外發布代碼："private":true

{
      "name": "webpack-react-demo",
      "version": "1.0.0",
      "description": "",
-     "main": "index.js",
+     "private": true,
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "lzh",
      "license": "ISC"
    }
複製代碼

• 安裝webpack

  • -D（或--save-dev）：安裝的包會記錄在devDependencies（dev開發時的依賴包）下
  • --save：安裝的包會記錄在dependencies（程序運行時的依賴包）下

npm i webpack webpack-cli webpack-dev-server -D
複製代碼

---

2. 建立項目目錄結構

|--- build                  // 存放webpack的配置文件
|--- src                    // 存放項目源代碼
|------ components          // 存放公共組件
|------ pages               // 存放頁面（爲多頁面作準備）
|--------- index            // 以頁面名稱命名
|------------ components    // 頁面級組件
|------------ index.html    // 頁面模板文件
|------------ index.js      // 入口文件
複製代碼

---

3. webpack初始化配置

爲了便於管理，咱們在/build目錄下分別新建三個配置文件：

a. webpack.common.js：公共配置（開發和生產環境共有的配置）;
b. webpack.dev.js：開發環境配置
c. webpack.prod.js：生產環境配置

這裏須要藉助webpack-merge(合併插件)進行拆分管理;

• 安裝webpack-merge

npm i webpack-merge -D
複製代碼

• 配置webpack.common.js

const path = require('path');
const DIST_PATH = path.resolve(__dirname,'../dist');    //聲明`/dist`路徑

module.exports = {
    // 入口文件js路徑
    entry : {
        index: path.resolve(__dirname,'../src/pages/index/index.js')
    },
    // 編譯輸出的js路徑
    output: {
        path: DIST_PATH,    // 建立的編譯文件生成到`/dist`
        filename: 'js/[name].js'   // js生成到`dist/js`，[name]表示保留原js文件名
    },
    // 模塊解析
    module: {

    },
    // 插件
    plugins: [

    ]
};
複製代碼

• 配置webpack.dev.js

const path = require('path');
const merge = require('webpack-merge');

const DIST_PATH = path.resolve(__dirname,'../dist');
const commonConfig = require('./webpack.common.js');

module.exports = merge(commonConfig, {
    mode: 'development',
    // 開發環境下須要的相關插件配置
    plugins: [

    ],
    // 開發服務器
    devServer: {
        hot: true,  // 熱更新
        contentBase: DIST_PATH, // 告訴服務器從哪一個目錄中提供內容，只有在你須要提供靜態文件時才須要
        historyApiFallback: true,   // 全部404都鏈接到index.html
        proxy: {
            '/api': 'http://localhost'
        }
    }
});
複製代碼

• 配置webpack.prod.js

const merge = require('webpack-merge');

const commonConfig = require('./webpack.common.js');

module.exports = merge(commonConfig, {
    mode: 'production',
    plugins: [

    ]
});
複製代碼

• 在package.json的scripts下修改終端命令：

{
      "name": "webpack-react-demo",
      "version": "1.0.0",
      "description": "",
      "private": true,
      "scripts": {
+       "build": "webpack --config ./build/webpack.prod.js --mode production",
+       "dev": "webpack-dev-server --config ./build/webpack.dev.js --mode development --open",
-       "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "lzh",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^4.39.1",
        "webpack-cli": "^3.3.6",
        "webpack-dev-server": "^3.7.2",
        "webpack-merge": "^4.2.1"
      }
    }
複製代碼

此時即可以在終端執行npm run build進行編譯；npm run dev進行啓動服務器運行

---

4. 安裝插件

從HTML模板自動生成最終HTML（/dist目錄下）: html-webpack-plugin；及webpack模板（能將元素id附加到mount）:html-webpack-template

• 安裝

npm i html-webpack-plugin html-webpack-template -D
複製代碼

• 在webpack.common.js的plugins下添加配置：

minify的相關配置：會將打包生成的.js和.css文件引入到.html文件中時去除註釋、空白等

//...
+   const HtmlWebpackPlugin = require('html-webpack-plugin');
+   const HtmlWebpackTemplate = require('html-webpack-template');
    
    module.exports = {
      //...
      //插件
      plugins: [
+        new HtmlWebpackPlugin({
+           inject: false, // 必需,把全部資產注入到給定的`template`
+           template: HtmlWebpackTemplate, // 必需
+           appMountId: 'root', // 模板文件中掛載元素的id名稱
+           filename: 'index.html',  // 要將HTML寫入的文件
+           minify: {
+               removeComments: true,   // 去掉註釋
+               collapseWhitespace: true,   //去掉多餘空白
+               removeAttributeQuotes: true //去掉一些屬性的引號，例如：id="moo" => id=moo
+           }
+       })
      ]
    };
複製代碼

---

5. 對以上配置進行測試驗證

5.1 在模板文件（/src/pages/index/index.html）中初始化模板頁面

// 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>webpack-react-demo</title>
</head>
<body>
    
</body>
</html>
複製代碼

5.2 在入口文件(/src/pages/index/index.js)中編寫一些js代碼輸出：

// index.js

alert("hello webpack!");
複製代碼

5.3 執行npm run build編譯

會在項目根目錄下新建立/dist目錄，而且在index.html中自動插入js文件及掛載元素id

5.4 執行npm run dev啓動服務器運行

會彈出以下圖所示內容。綜上，目前的項目的基本配置成功！
接下來一節中會繼續介紹插件及安裝react、typescript的依賴。

---

step1的源碼:github.com/lizenghua/w…

---

歡迎添加本人微信一塊兒交流學習。