reactjs--建立webpack架構

react核心

虛拟dom（用js寫出來的結構）---diff對比算法

1.利用node文法--npm init -y 快速初始化項目（建立基本的webpack項目版本4.x

）

第一步建立完後，會出現一個package.json ,用來存放包記錄，是個配置檔案

2.手動建立src,存放代碼，同級建立dist(或者build),用來 存放釋出的項目

3.src-index.html檔案--小技巧快捷鍵生成html代碼--感歎号!+tab鍵

4.src-main.js--入口檔案

5. CLS——cls清螢幕指令 1功能:清除螢幕上的所有顯示,光标置于螢幕左上角。

5.控制終端-cnpm(國内阿裡下載下傳 鏡像，比npm快點，當然npm自己配置也是一樣的)

安裝webpack

6.運作 cnpm i webpack -D 或者全局運作 npm i cnpm -g

第六步這個配置不好以後的指令行會報錯，錯誤為webpack : 無法将“webpack”項識别為 cmdlet、函數、腳本檔案或可運作程式的名稱。請檢查名稱的拼寫，如果包 括路徑，請確定路徑正确，然後再試一次。

解決辦法：

全局安裝webpack

npm install -g webpack

把node_global加入到環境變量

我的解決辦法是：

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"dev": "webpack"

1）找到項目根目錄下的package.json檔案并打開，找到"scripts":{}這一段，在其中添加"dev": "webpack"這一行，效果如下：??? 2）指令行中輸入“npm run dev”指令，順利執行

指令行中輸入“npm run dev”指令，順利執行webpack指令，将入口檔案“src/index.js”打包（若是webpack.config.js中mode為production則自動壓縮，否則不壓縮，webpack 4.x以前要壓縮的話需要另外安裝元件并做相應配置，webpack 4.x僅需一個配置項即可壓縮代碼，贊！）并輸出到“dist/main.js”

這是因為nodejs版本太低，或者說webpack版本太高，是以不相容。然後我把webpack解除安裝掉，重新安裝了2.6.1版本的webpack，問題解決：[[email protected] ~]# npm uninstall webpack -g

unbuild [email protected]

[[email protected] ~]# npm install [email protected] -g --registry=https://registry.npm.taobao.org

[[email protected] ~]# webpack -v

2.6.1

[[email protected] ~]#

先全局安裝webpack和webpack-cli

npm install webpack -g

npm install webpack-cli -g

再局部安裝webpack和webpack-cli

npm install webpack --save-dev

npm install webpack-cli --save-dev

親測有效~

cnpm i webpack-cli -D 腳手架-指令行工具-例如輸入webpack直接打包

7.建立webpack.config.js--

//向外暴露一個打包的配置對象,node文法

module.exports = {

mode:''//development 開發者環境 production 産品環境打包部署

}

8.注意webpack4.x提供了約定大于配置

預設約定了，打包的入口是src->index.js

打包的輸出檔案是dist->main.js

當然，這些也是可以手動通過代碼修改的

9.實時自動打包

全局安裝

npm install webpack-dev-server

視訊安裝-局部安裝webpack 根目錄>cnpm i webpack -D

cnpm i webpack-dev-server -D

本地-安裝：

npm install webpack-dev-server --save-dev

檢視：webpack-dev-server -v

在package.json檔案下添加

"dev":"webpack-dev-server"(在"scripts":{中添加})

運作腳本-npm run dev

webpack-dev-server 将打包好的main.js放到了記憶體中，是以在根目錄原目錄下的dist看不到

10.修改index.html

<script src="/main.js"></script>

終止操作 ctrl+c

轉載于:https://www.cnblogs.com/fdxjava/p/11573115.html