Webpack基礎入門學習筆記

# Webpack Project Build

1.建立一個項目目錄文件夾

　　如：D:/demo

2.打開demo文件夾，按住Shift + 鼠標右鍵，選擇【在此處打開命令窗口】

3.初始化npm,生成package.json文件

　　npm init -y

　　這是爲了便於往後項目包的管理及發佈，詳情請查閱https://docs.npmjs.com

4.安裝 webpack

【安裝最新版本】

　　npm install --save-dev webpack

【安裝特定版本】

　　npm install --save-dev webpack@<version>

5.安裝 webpack 4+ 版本

　　npm install --save-dev webpack-cli

6.建立webpack.config.js文件

　　配置請參考官方文檔：

　　https://www.webpackjs.com/configuration/#%E9%80%89%E9%A1%B9

7.編輯package.json文件

　　將：

　　"main": "index.js"

　　替換爲：

　　"private": true

　　這一步官網介紹是爲了確保咱們安裝包是私有的(private)，移除 main 入口，能夠防止意外發布你的代碼。

常見項說明：

-- name：項目名稱。(默認: 當前目錄名稱)

-- version：項目版本。(默認: 1.0.0)

-- description：項目描述。(默認: 來自README的信息 || "")

-- keywords：項目關鍵詞。

-- homepage：項目官網地址。

-- license：項目許可證。

-- author：項目做者。

-- contributors：項目貢獻者。

-- files：值爲數組類型，

　　　　a.爲執行"npm pack"時須要包含的文件

　　　　b.需爲根目錄文件（其能夠是文件名或文件夾名，當爲文件夾名時將包含其下的全部子文件及子文件夾）

　　　　c.默認爲["*"]，包含全部文件(當使用默認值時，可在根目錄建立".npmignore"文件來指定排除哪些文件，語法與".gitignore"相似)

-- main：程序的主要入口點，當另外一個應用程序須要您的模塊時將加載的文件的名稱。(默認: index.js)

-- repository：項目代碼存放地址，對想要爲你的項目貢獻代碼的人有幫助

　　　　　　eg: { "type" : "git", "url" : "https://github.com/npm/cli.git"}

-- config：項目配置{\\尚有疑問\\}

　　　　eg："config" : { "port" : "8080" }

　　　　a.可經過"process.env.npm_package_config_port"來調用

　　　　b.可經過"npm config set foo:port 8001"來修改其配置

-- dependencies：您的應用程序在生產中所需的包。

-- devDependencies：僅爲本地開發和測試所需的包。

-- private：當爲"true"時npm將不容許您發佈該項目

-- scripts：值爲對象類型，指定了項目的生命週期個各個環節須要執行的命令(默認: 一個空test腳本)

—— prepublish：在打包併發布包以前運行，以及在沒有任何參數的本地npm安裝以前運行

—— prepare：在打包和發佈包以前運行，在沒有任何參數的本地"npm install"上運行，以及安裝git依賴項時。這是在preublish以後運行，可是在preublishOnly以前運行

—— prepublishOnly：在包準備和打包以前運行，僅限於npm發佈

—— prepack：在打包tarball以前運行（在"npm pack"，"npm publish"，以及安裝git依賴項時

—— postpack：在生成tarball以後運行並移動到其最終目標

—— publish,postpublish：在包發佈後運行

—— preinstall：在安裝軟件包以前運行

—— install,postinstall：安裝包後運行

—— preuninstall,uninstall：在卸載軟件包以前運行

—— postuninstall：在卸載軟件包以後運行

—— pretest, test, posttest：由"npm test"命令運行

—— prestop, stop, poststop：由"npm stop"命令運行

—— prestart, start, poststart：由"npm start"命令運行

—— prerestart, restart, postrestart：由"npm restart"命令運行

—— preshrinkwrap, shrinkwrap, postshrinkwrap：由"npm shrinkwrap"命令運行

另外，也能夠經過"npm run <stage>"來運行指定的腳本。當前除了上述這些生命週期之外，你也能夠自定義一些能夠經過"npm run"來執行的腳本指令

eg："scripts": { "dev":"node app.js" }

執行cli命令："npm run dev" 就能夠運行 "node app.js"

詳情請參考官方文檔：https://docs.npmjs.com/misc/scripts

詳細package.json文件配置請參考官方文檔：

https://docs.npmjs.com/files/package.json.html

在博客園也發現一個很好的很是詳情的中文翻譯版：

https://www.cnblogs.com/tzyy/p/5193811.html#_h1_9