使用webpack4一步步搭建react專案（一）

2021-09-16 23:09:03 字數 1441 閱讀 9546

平時都是用命令列工具一鍵生成專案，沒有機會使用webpack從頭到尾搭建專案。

經過幾天的學習，決定用webpack搭建乙個react專案，並將搭建過程記錄下來，與大家一起交流分享。菜雞一枚，如果那裡有錯誤，希望大家幫忙指出。

本篇文章會被分成三章，每一章都有乙個主題。

專案** github 倉庫

mkdir diy-webpack-for-react


cd diy-webpack-for-react


npm init -y
新增.gitignore檔案

node_modules


/dist


.idea


.vscode
初始化git倉庫

git init
npm i webpack webpack-cli -d
const path =


require


("path");


const htmlwebpackplugin =


require


("html-webpack-plugin");


module.exports =


, resolve:


, module:,,


]}, plugins:


[// 該外掛程式能將生成的入口js檔案注入到模板html內


newhtmlwebpackplugin()]};
我們需要配置.babelrc檔案，來告訴babel我們要使用的presets。

在npm內新增以下指令碼，方便開發使用

// ...


"scripts"


:// ...
使用npm run build，打包專案。使用npm run serve:dist,將打包後的檔案跑起來。

乙個簡單的webpack配置完成了。

安裝react和react-dom就可以開始寫**了。

npm i react react-dom
webpack.dev.jswebpack.prod.js來針對不同的場景；使用webpack-dev-server啟動開發伺服器；優化生產環境的打包檔案。

learn webpack

webpack 的 bundle split 和 code split 區別和應用

webpack guides

learn webpack step by step

windows Thrift c 一步步搭建

1.thrift 原始碼路徑 2.libevent原始碼路徑 3.boost路徑 安裝 conan install boost 1.68.0 conan stable 4.openssl路徑 安裝 conan install openssl 1.1.1a conan stable conan安裝bo...

一步步學ROS

最近因為看svo的 裡面用到catkin決定要好好看ros，年前學會基本操作。啟動節點 rosrun package name executable name 檢視節點 rosnode list 注 rosout 節點是乙個特殊的節點，通過 roscore 自動啟動 檢視特定節點的資訊 rosnod...

一步步啟動linux

可以一步一步啟動linux.在ubantu剛一啟動時，按c健即進入grub 提示符狀態，在此狀態下輸入 我用的是ubuntu 13 grub linux vmlinuz grub ls boot grub initrd boot initrd.img 3.11.0 15 generic grub b...