在當(dāng)前目錄下打開命令行

shift+鼠標(biāo)右擊(打開命令行窗口)

項目環(huán)境搭建

參考資料
https://segmentfault.com/a/1190000006178770

1.創(chuàng)建package.json文件

npm init

2.安裝依賴插件

配置package.json文件(devDependencies為開發(fā)依賴插件，將在項目上線后自動卸載；dependencies為項目運行必需插件，始終存在。)

"devDependencies": {
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  },
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  }

命令行輸入

npm i

指令執(zhí)行后將在項目根目錄生成包含插件的node_modules文件夾
(之后需要任何插件，同樣只需在package.json中配置，通過 npm i 指令即可一次性安裝。)

3.創(chuàng)建app文件目錄

app文件用于存放原始數(shù)據(jù)和js模塊

4.創(chuàng)建public文件目錄

public文件夾用于存放供瀏覽器讀取的文件。包括使用webpack打包生成的js文件及一個index.html文件

5.打包文件

配置webpack.config文件

module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"http://打包后輸出文件的文件名(若無改文件,將自動在path目錄下創(chuàng)建一個)
  }
}

打包文件至指定目錄

npm start

此時可通過public目錄下的index.html查看運行效果

6.創(chuàng)建服務(wù)器以在端口中查看運行效果

修改package.json即可,詳見資料

啟動服務(wù)器

npm run server

完整開發(fā)環(huán)境文件目錄結(jié)構(gòu)

關(guān)于 -g

命令中，全局安裝（global）和本地安裝（local）方式的區(qū)別為帶參數(shù)-g和不帶參數(shù)-g。
具體區(qū)別：

npm install moduleName ，則是將模塊下載到當(dāng)前命令行所在目錄。
npm install moduleName -g ，模塊將被下載安裝到全局目錄中，即Node的安裝目錄下的node_modules下