基於webpack4.X從零搭建React腳手架

temulun發表於2018-12-22

專案初始化

$ npm init
複製程式碼

安裝webpack

本次建立是基於webpack4

$ npm install --save-dev
複製程式碼

新建webpack配置檔案

在根目錄建立build資料夾，新增一個js檔案，命名為webpack.base.conf.js

// webpack.base.conf.js 檔案
const path = require('path');
const DIST_PATH = path.resolve(__dirname, '../dist');
module.exports = {
        entry: {
            app: './app/index.js'
        },
        output: {
            filename: "js/bundle.js",
            path: DIST_PATH
        }
};
複製程式碼

使用merge的方式來組織webpack基礎配置和不同環境的配置

先安裝webpack-merge：

$ npm install --save-dev webpack-merge
複製程式碼

在build資料夾中再新增一個js檔案，命名為 webpack.prod.conf.js

// webpack.prod.conf.js 檔案
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
module.exports = merge(baseWebpackConfig, {
    mode: 'production'
});
複製程式碼

在根目錄下建立app目錄，然後建立index.js檔案

var element =document.getElementById('root');
element.innerHTML = 'hello, world!';
複製程式碼

在根目錄建立一個public資料夾，然後新建一個index.html檔案

// index.html
<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>從零開始搭建react工程</title>
  </head>
  <body>
        <div id="root"></div>
        <script src="../dist/js/bundle.js"></script>
  </body>
</html>
複製程式碼

當前專案目錄樹

  |- /app
    |- index.js
  |- /node_modules
  |- /public
    |- index.html
  |- /build
    |- webpack.base.conf.js
    |- webpack.prod.conf.js
  |- package.json
  |- package-lock.json
複製程式碼

安裝webpack-cli

webpack 4.0 版本之後的webpack，已經將webpack命令工具遷移到webpack-cli模組了,需要安裝 webpack-cli

$ npm install --save-dev webpack-cli
複製程式碼

package.json檔案 scripts屬性配置一個build命令

其值為：webpack --config build/webpack.prod.conf.js，以下是scripts的相關程式碼

// package.json
"scripts": {
    "build": "webpack --config build/webpack.prod.conf.js",
    "test": "echo \"Error: no test specified\" && exit 1"
},
複製程式碼

安裝React

$ npm install --save react react-dom
複製程式碼

修改app目錄下的index.js的程式碼

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

ReactDom.render(
    <h1>hello, world!</h1>,
    document.getElementById("root")
);
複製程式碼

注意 import 屬於ES6規範，因此需要轉譯ES2015+的語法，安裝並配置 babel 以及相關依賴

$ npm install --save-dev babel-loader babel-core babel-preset-env babel-preset-react
複製程式碼

根目錄建立.babelrc檔案，配置presets.

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": [
            "> 1%",
            "last 5 versions",
            "ie >= 8"
          ]
        }
      }
    ],
    "react"
  ]
}
複製程式碼

修改webpack.base.conf.js檔案

// webpack.base.conf.js
const path = require('path');
const APP_PATH = path.resolve(__dirname, '../app');
const DIST_PATH = path.resolve(__dirname, '../dist');
module.exports = {
    entry: {
        app: './app/index.js'
    },    
    output: {
        filename: 'js/bundle.js',
        path: DIST_PATH
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                use: "babel-loader",
                include: APP_PATH
            }
        ]
    }
};
複製程式碼

執行 npm run build

新增外掛

public下的index.html本該自動新增到dist目錄，並且引用資源自動載入到該檔案，通過html-webpack-plugin實現這一步

$ npm install html-webpack-plugin --save-dev
複製程式碼

webpack.prod.conf.js中配置plugins屬性

const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(baseWebpackConfig, {
    mode: 'production',
    plugins: [
        new HtmlWebpackPlugin({
            template: 'public/index.html',
            inject: 'body',
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
        })
    ]
});
複製程式碼

刪除 index.html 中手動引入的 script 標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>從零開始搭建react工程</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>
複製程式碼

重新編譯檢視 npm run build 瀏覽器開啟檢視目錄 dist 下的 index.html

以上步驟都成功的前提下繼續走下一步

生成的檔名新增Hash值，目的是解決快取問題
修改webpack.prod.conf.js，mode: 'production', 增加以下程式碼

// webpack.prod.conf.js
output: {
    filename: "js/[name].[chunkhash:16].js",
},
複製程式碼

生成前需要清理之前專案生成的檔案，因為由於檔名的改變如果不刪除會一直增加
安裝外掛 clean-webpack-plugin

$ npm install --save-dev clean-webpack-plugin
複製程式碼

修改 webpack.prod.conf.js

// webpack.prod.conf.js
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = merge(baseWebpackConfig, {
    mode: 'production',
    output: {
        filename: "js/[name].[chunkhash:16].js",
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'public/index.html',
            inject: 'body',
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
        }),
        new CleanWebpackPlugin(['../dist'], { allowExternal: true })
    ]
});
複製程式碼

公共程式碼與業務程式碼分離

修改 webpack.base.conf.js 的 entry 入口屬性，抽出框架程式碼

entry: {
      app: './app/index.js',
      framework: ['react','react-dom'],
},
複製程式碼

修改webpack.prod.conf.js，增加以下程式碼，目的是分離框架程式碼和業務程式碼
雖然上面步驟抽出框架程式碼生成兩個檔案，但是app.js還是包含框架程式碼

optimization: {
        splitChunks: {
            chunks: "all",
            minChunks: 1,
            minSize: 0,
            cacheGroups: {
                framework: {
                    test: "framework",
                    name: "framework",
                    enforce: true
                }
            }
        }
    }
複製程式碼

cacheGroups物件，定義了需要被抽離的模組
其中test屬性是比較關鍵的一個值，他可以是一個字串，也可以是正規表示式，還可以是函式。如果定義的是字串，會匹配入口模組名稱，會從其他模組中把包含這個模組的抽離出來
name是抽離後生成的名字，和入口檔案模組名稱相同，這樣抽離出來的新生成的framework模組會覆蓋被抽離的framework模組

整合 webpack-dev-server

開發環境開啟服務監聽檔案改動實時更新最新內容

$ npm install --save-dev webpack-dev-server
複製程式碼

在build中新增webpack.dev.conf.js檔案

const path = require('path');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = merge(baseWebpackConfig, {
    mode: 'development',
    output: {
        filename: "js/[name].[hash:16].js",
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'public/index.html',
            inject: 'body',
            minify: {
                html5: true
            },
            hash: false
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        port: '8080',
        contentBase: path.join(__dirname, '../public'),
        compress: true,
        historyApiFallback: true,
        hot: true,
        https: false,
        noInfo: true,
        open: true,
        proxy: {}
    }
});
複製程式碼

在package.json scripts屬性新增內容

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
複製程式碼

npm run dev
自動開啟瀏覽器開啟入口頁面實時更新

獨立匯出 css 檔案

安裝css相關依賴
sass less 預處理

$ npm install extract-text-webpack-plugin
$ npm install style-loader css-loader postcss-loader autoprefixer --save-dev
$ npm install less sass less-loader sass-loader stylus-loader node-sass --save-dev
複製程式碼

webpack.base.conf.js 檔案修改

// webpack.base.conf.js
{
    test: /\.css$/,
    use: [
        {
          loader: "style-loader" //在html中插入<style>標籤
         },
         {
             loader: "css-loader",//獲取引用資源，如@import,url()
         },
         {
              loader: "postcss-loader",
              options: {
                    plugins:[
                       require('autoprefixer')({
                           browsers:['last 5 version']
                       })
                  ]
              }
        }
     ]
},
{
   test:/\.less$/,
   use: [
         {  loader: "style-loader"  },
         {  loader: "css-loader" },
         {
            loader: "postcss-loader",//自動加字首
            options: {
                   plugins:[
                          require('autoprefixer')({
                              browsers:['last 5 version']
                          })
                  ]
            }
         },
         {  loader: "less-loader" }
     ]
},
{
      test:/\.scss$/,
      use:[
             {  loader: "style-loader"  },
             {
                      loader: "css-loader",
             },
             {  loader: "sass-loader" },
             {
               loader: "postcss-loader",
              options: {
                    plugins:[
                         require('autoprefixer')({
                           browsers:['last 5 version']
                         })
                   ]
              }
          }
     ]
},
複製程式碼

圖片和路徑處理

$ npm i file-loader url-loader --save-dev
複製程式碼

webpack.base.conf.js 檔案修改

// webpack.base.conf.js
{
    test: /\.(png|jpg|gif|woff|svg|eot|woff2|tff)$/,
    use: 'url-loader?limit=8129', 
    //注意後面那個limit的引數，當你圖片大小小於這個限制的時候，會自動啟用base64編碼圖片
    exclude: /node_modules/
}
複製程式碼

build 時報錯

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (F:\react\createApp\node_modules\webpack\lib\Chunk.js:824:9)
複製程式碼

webpack4.0中使用“extract-text-webpack-plugin”報錯
解決辦法

$ npm install extract-text-webpack-plugin@next
複製程式碼

背景圖片路徑問題

由於css檔案分離出來的原因，會導致在css資料夾下找images資料夾下的圖片
解決辦法 publicPath屬性改為 '/'，以絕對路徑的方式尋找資源

{
    test:/\.(png|jpg|gif)$/,
    use:[{
        loader:'url-loader',
        options: {
              // outputPath:'../',//輸出**資料夾
              publicPath: '/',
              name: "images/[name].[ext]",
              limit:500  //是把小於500B的檔案打成Base64的格式，寫入JS
         }
      }]
},
複製程式碼

基於React的腳手架搭建
2018-03-20
React
從零開始搭建一個 React + Mobx + React Router 腳手架
2019-04-11
React
從零開始搭建腳手架
2018-05-12
基於vite2的react腳手架
2021-04-11
ViteReact
react+typescript+antd腳手架搭建
2019-03-11
ReactTypeScript
Dva手腳架搭建React專案
2020-06-17
React
從零搭建Spring Boot腳手架（4）：手寫Mybatis通用Mapper
2020-08-07
Spring BootMyBatisAPP
從零搭建Spring Boot腳手架（2）：增加通用的功能
2020-08-06
Spring Boot
從零學腳手架(四)---babel
2021-03-11
Babel
用webpack4從零開始構建react腳手架
2021-09-09
WebReact
教你從零開始搭建一款前端腳手架工具
2018-12-26
前端
Koa2從零到腳手架
2022-04-10
從零搭建Spring Boot腳手架（6）：整合Redis作為快取
2020-08-19
Spring BootRedis快取
從零搭建一個前端cli腳手架併發布到npm
2021-09-26
前端NPM
React入門---react腳手架
2018-03-09
React
Vite 2.0 + React + TypeScript + Antd 搭建簡單腳手架
2022-01-05
ViteReactTypeScript
從零學腳手架(二)---初識webpack
2021-03-09
Web
從零搭建Spring Boot腳手架（1）：開篇以及技術選型
2020-08-04
Spring Boot
從零搭建Spring Boot腳手架（7）：Elasticsearch應該獨立服務
2020-09-24
Spring BootElasticsearch
React腳手架之NextJs
2020-11-12
ReactNextJS
新手搭建簡潔的Express-React-Redux腳手架
2018-05-05
ExpressReactRedux
從零學腳手架(六)---production和development拆分
2021-03-15
dev
react 高效高質量搭建後臺系統系列 —— 腳手架搭建
2022-12-22
React
從搭建腳手架到在npm上釋出react元件
2019-02-16
NPMReact元件
從零學腳手架(七)---webpack-dev-server使用
2021-03-16
WebdevServer
從零搭建Spring Boot腳手架（7）：整合OSS作為檔案伺服器
2020-08-25
Spring Boot伺服器
從React腳手架工具學習React專案的最佳實踐（上）：前端基礎配置
2019-03-03
React前端
服務端渲染的React手腳架。完美使用 React, Redux, and React-Router！最好用的腳手架
2019-02-16
服務端ReactRedux
基於 Spring Cloud 的微服務腳手架
2022-12-18
SpringCloud微服務
搭建webpack簡易腳手架
2019-01-26
Web
如何用vue搭建腳手架
2020-12-08
Vue
從零打造你的前端開發腳手架
2023-03-13
前端
從零開始搭建React應用（一）——基礎搭建
2018-05-12
React
從零開始搭建React應用（二）——React應用架構
2018-07-17
React應用架構
仿 vue-cli 搭建屬於自己的腳手架
2019-03-27
Vue
vue腳手架基礎
2020-11-21
Vue
不借助腳手架手動搭建react專案（webpack5 + Antd4 + React18）
2023-02-24
ReactWeb
React（腳手架）——create-react-app擼api（三）
2019-03-06
ReactAPPAPI

基於webpack4.X從零搭建React腳手架

專案初始化

安裝webpack

新建webpack配置檔案

使用merge的方式來組織webpack基礎配置和不同環境的配置

在根目錄下建立app目錄，然後建立index.js檔案

當前專案目錄樹

安裝webpack-cli

package.json檔案 scripts屬性配置一個build命令

安裝React

新增外掛

以上步驟都成功的前提下繼續走下一步

公共程式碼與業務程式碼分離

整合 webpack-dev-server

獨立匯出 css 檔案

build 時報錯

背景圖片路徑問題

相關文章