注意：為了方便解決許可權問題，推薦在你專案託管目錄裡面進行許可權設定

sudo chown -R  

1.執行npm init -y 快速初始化一個專案，得到一個配置檔案package.json。這是一個標準的npm說明檔案，裡面蘊含了豐富的資訊，包括當前專案的依賴模組，自定義的指令碼任務等等。
2. 在專案根目錄建立資料夾src原始碼目錄和dist產品目錄。
3. 在src目錄下建立首頁index.html。
4. 使用npm安裝webpack，執行命令npm i webpack webpack-cli -D，其中的引數i是install的縮寫，-D是--save-dev的縮寫，表示用於開發環境的包，釋出後就會自動刪除；與之對應的是-S

“devDependencies”: {
“webpack”: “^4.16.5”,
“webpack-cli”: “^3.1.0”
}

注意：這裡要先全域性安裝webpack, 執行指令是sudo npm install webpack -g 否則webpack打包會顯示沒有這個內部指令。

另外如果以上npm時失敗或者提示modul裡面沒有相關模組則使用root許可權安裝全域性。

5.對於webpack4.x版本新添加了預設的特性：

1. 預設的打包入口是src/index.js
2. 預設的輸出口是dist/main.js

6.在4.x裡面不需要設定指令碼script進行命令，因為可以通過webpack-cli實現命令分離，即你只需要終端輸入webpack就可以完成打包。這裡我們還需要對webpack進行配置，配置檔案為webpack.config.js。

7.當我們每次修改了檔案還需要再次在命令列裡面進行webpack，這樣相當麻煩，所以我們需要npm i webpack-dev-server,相當於設定了一個本地伺服器，然後在package.js裡面的script屬性裡設定：

“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1”,
“dev”: “webpack-dev-server –mode development”
},

之後在終端裡面輸入npm run dev然後就進入了伺服器監控，只要我們再有修改並且保持，就會實時編譯更新。注意，這裡webpack-dev-server會將編譯好的main.js檔案 託管在記憶體中的跟目錄下，而不再是磁盤裡的dist目錄下，所以我們在目錄裡看不見，但是這樣速度會提高，而且可以在html裡面進行引入。
在上面我之所以會加上--mode development是因為在之前的package.config.js設定裡面的mode：development 沒有效果.

8.通過npm i html-webpack-plugin -D,這個命令也會將我們的index.html託管到記憶體當中，而且還會自動新增我們編譯完成後的main.js的路徑到html檔案裡面。而且輸入地址和埠號直接跳轉到首頁。
下載完成後我們還需要對webpack.config.js進行配置。

const path=require(‘path’)
const HtmlWebPackPlugin = require(‘html-webpack-plugin’)//匯入 在記憶體當中自動生成index頁面的外掛
//建立一個外掛的例項
const htmlPlugin = new HtmlWebPackPlugin({
template : path.join(__dirname,”./src/index.html”),//原始檔
filename:”index.html” //生成到記憶體當中的首頁的名字
})
//向外暴露一個打包的物件
module.exports={
mode:’production’ , //可選值有：production development
plugins:[
htmlPlugin
]
}

有了上面的配置，webpack基本配置完成，剩下的是關於react的配置。

通過npm i react react-dom -D

• react 是關於建立虛擬dom
• react-dom 是實現渲染

除了以上兩個外掛外，還需要babel的特別支援，babel有兩個特點，能夠將es6轉換為es5，能夠將jsx編譯為符合js的語法。
其命令為npm i babel-core babel-plugin-transform-runtime -Dh和npm i babel-preset-env babel-preset-stage-0 babel-preset-react -D和npm i babel-loder -S

之後再對模組的匹配進行指定：

完整的webpack.config.js程式碼：

const path=require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')//匯入   在記憶體當中自動生成index頁面的外掛

//建立一個外掛的例項
const htmlPlugin = new HtmlWebPackPlugin({
    template : path.join(__dirname,"./src/index.html"),//原始檔
    filename:"index.html" //生成到記憶體當中的首頁的名字
})


//向外暴露一個打包的物件
module.exports={
    mode:'production' , //可選值有：production development
    plugins:[
        htmlPlugin
    ],
    module:{
        rules:[
            {test:/\.(js|jsx)$/,use:'babel-loader',exclude:/node_modules/}
        ]
    }
}

然後，還要在/src目錄下建立一個檔案/src/.babelrc,用來解釋babel-loader.

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

之後就可以順利的解析渲染jsx語法了。