webpack項(xiàng)目構(gòu)建： 安裝模塊的cmd命令，devDependencies，dependencies【詩(shī)書(shū)畫(huà)唱】
這篇專(zhuān)欄從開(kāi)始寫(xiě)到寫(xiě)完前前后后幾乎花了我2天的時(shí)間！十分實(shí)用的內(nèi)容！求三連和推薦！
目錄：
構(gòu)建一個(gè)webpack項(xiàng)目。
1、在頁(yè)面上創(chuàng)建一個(gè)div，設(shè)置div的高度和寬度，并且添加背景圖片。
2、在這個(gè)div中添加一個(gè)Img標(biāo)簽，給他添加一張圖片。
3、（選做）將貪吃蛇代碼添加到webpack項(xiàng)目中，并且運(yùn)行這個(gè)游戲。
我自己給出的答案
當(dāng)發(fā)給別人的公司我的項(xiàng)目時(shí)，為了保護(hù)我的原創(chuàng)邏輯的知識(shí)版權(quán)，不發(fā)src目錄的內(nèi)容等等
暫時(shí)不執(zhí)行的加載字體文件和加載數(shù)據(jù)，xml文件的cmd命令和操作
常用的npm install 安裝模塊的cmd命令
devDependencies和dependencies的區(qū)別
個(gè)人理解：
npm install moduleName --save 命令
1. 安裝模塊到項(xiàng)目node_modules目錄下。
2. 會(huì)在package.json文件的dependencies 屬性將模塊依賴(lài)寫(xiě)入。
3. 運(yùn)行 npm install 初始化項(xiàng)目時(shí)，會(huì)將模塊下載到項(xiàng)目目錄下。
4. 運(yùn)行npm install --production或者注明NODE_ENV變量值為production時(shí)，會(huì)自動(dòng)下載模塊到node_modules目錄中。
npm install? moduleName --save-dev 命令
1. 安裝模塊到項(xiàng)目node_modules目錄下。
2. 會(huì)在package.json文件的devDependencies 屬性將模塊依賴(lài)寫(xiě)入。
3. 運(yùn)行 npm install 初始化項(xiàng)目時(shí)，會(huì)將模塊下載到項(xiàng)目目錄下。
4. 運(yùn)行npm install --production或者注明NODE_ENV變量值為production時(shí)，不會(huì)自動(dòng)下載模塊到node_modules目錄中。
devDependencies用于本地環(huán)境開(kāi)發(fā)的時(shí)候。
dependencies用于發(fā)布環(huán)境（個(gè)人理解為：用于運(yùn)行環(huán)境的時(shí)候）
個(gè)人理解：devDependencies 是用了駝峰命名法。項(xiàng)目運(yùn)行時(shí)要用就選擇dependencies依賴(lài)，--save。只開(kāi)發(fā)環(huán)境要要用，項(xiàng)目運(yùn)行時(shí)不用，就選擇devDependencies，--save-dev
構(gòu)建一個(gè)webpack項(xiàng)目。
1、在頁(yè)面上創(chuàng)建一個(gè)div，設(shè)置div的高度和寬度，并且添加背景圖片。
2、在這個(gè)div中添加一個(gè)Img標(biāo)簽，給他添加一張圖片。
3、（選做）將貪吃蛇代碼添加到webpack項(xiàng)目中，并且運(yùn)行這個(gè)游戲。
我自己給出的答案
創(chuàng)建空文件夾：
把要安裝的模塊等等一次性用cmd命令安裝：
npm?install?--global?webpack
（個(gè)人對(duì)這個(gè)cmd命令的理解：這個(gè)cmd命令是用了全局安裝?webpack的。或npm?install webpack??--global 或?npm?install?webpack??-g，-g和--global都表示全局安裝，安裝后以后就可以不用再安裝了，達(dá)到一勞永逸的效果。-后面接長(zhǎng)字符串，--后面接短字符串，個(gè)人理解成是一種習(xí)慣風(fēng)格，?--global 或-g的在cmd命令的位置可以自定義，總之不一定在結(jié)尾，空格等的方面要注意不用寫(xiě)錯(cuò)了。）
npm config ls
（個(gè)人對(duì)這個(gè)cmd命令的理解：查看模塊等等都會(huì)安裝在什么目錄的信息。）
npm?init?-y
（個(gè)人對(duì)這個(gè)cmd命令的理解：初始化npm，自動(dòng)在項(xiàng)目的目錄下生成package.json的文件）
npm install webpack webpack-cli --save-dev
（個(gè)人對(duì)這個(gè)cmd命令的理解：自動(dòng)在項(xiàng)目的目錄下生成package-lock.json文件和node_modules文件夾和里面的內(nèi)容，即為安裝webpack-cli腳手架，此工具用于在命令行中運(yùn)行 webpack?，F(xiàn)實(shí)中的腳手架是施工現(xiàn)場(chǎng)為工人操作并解決垂直和水平運(yùn)輸而搭設(shè)的一種臨時(shí)性的建筑工具，我理解這個(gè)cmd命令中的腳手架是類(lèi)似于控制webpack的運(yùn)行的控制器一般的工具。）
npm?install?--save-dev?style-loader?css-loader
（個(gè)人對(duì)這個(gè)cmd命令的理解：下載樣式加載模塊，即為安裝并添加?style-loader 和 css-loader，這樣才可以從 JavaScript 模塊中 import 一個(gè) CSS 文件）
npm?install?file-loader?url-loader?--save-dev
（個(gè)人對(duì)這個(gè)cmd命令的理解：下載圖片加載模塊，使用 file-loader，我們可以輕松地將這些內(nèi)容混合到 CSS 中。個(gè)人認(rèn)為這樣代碼更安全，相當(dāng)于加密了，別人就難盜取項(xiàng)目中原創(chuàng)的邏輯等等）
npm?install?path?--save
(個(gè)人對(duì)這個(gè)cmd命令的理解：下載path模塊。)
創(chuàng)建配置文件：
webpack.config.js
//webpack.config.js
//path模塊是用來(lái)操作文件路徑的核心模塊
//npm?install?path?--save
const?path?=?require('path');
//每個(gè)js文件都有一個(gè)module對(duì)象，存放模塊需要導(dǎo)出的值和函數(shù)
module.exports?=?{
????//./表示當(dāng)前webpack.config.js文件所在的文件夾
????//指定項(xiàng)目構(gòu)建的入口文件是src/index.js
????entry:?'./src/index.js',
????output:?{
????????//指定打包以后生成的文件名是什么
????????filename:?'bundle.js',
????????//__dirname指的是當(dāng)前的根目錄
????????//指定打包以后生成的文件存放的位置
????????path:?path.resolve(__dirname,'dist')
????},
????module:?{
????????rules:?[
????????????{
????????????????//對(duì)于項(xiàng)目中以.css結(jié)尾的所有的文件都使用
????????????????//style-loader和css-loader進(jìn)行解析
????????????????test:?/\.css$/,
????????????????use:?['style-loader','css-loader']
????????????},
????????????{
????????????????//對(duì)項(xiàng)目中以.png,.gif,.jpg,.svg結(jié)尾的文件都使用
????????????????//file-loader進(jìn)行解析
????????????????test:?/\.(png|gif|jpg|svg)$/,
????????????????use:?['file-loader']
????????????}
????????]
????}
};
創(chuàng)建src中的被打包文件和dist中的將使用打包文件的文件（打包文件會(huì)自動(dòng)生成到dist目錄下）
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>Document</title>
</head>
<body>
????<!--?會(huì)自動(dòng)生成到dist目錄下的打包文件是bundle.js?：-->
????<script?src="bundle.js"></script>
????<!--?引入src中的被打包文件index.js
?（其中src中的css文件等等通過(guò)import等等導(dǎo)入到了index.js文件中，
????????一起被打包）：
????
? ??如果不使用引入和自動(dòng)在dist目錄下生成的打包文件，就會(huì)出現(xiàn)沒(méi)有效果等等的情況-->
????<script?src="../src/index.js"></script>?
</body>
</html>
//該index.js文件的目錄：src/index.js
//使用import引入css文件：
import?'./my.css';
//創(chuàng)建名稱(chēng)為div1和div的div：
let?div1=?document.createElement('div');
let?div?=?document.createElement('div');
/*下面的話(huà)，必須要用classList才讓css中可以使用類(lèi)選擇器,
classList.add('div1')相當(dāng)于html中聲明class="div1"：*/
div1.classList.add('div1');
//把div1添加到div中：
div.appendChild(div1);
//下面的代碼就是創(chuàng)建圖片的js代碼：
//引入圖片也要用import,同時(shí)要用from來(lái)聲明要引入的圖片路徑：
import?icon?from?'./hanser.jpg';
let?i?=?new?Image();
i.src?=?icon;
//把生成的圖片添加到div中：
div.appendChild(i);
//把div放添加到body中顯示：
document.body.appendChild(div);
修改package.json：
添加代碼"private": true,
刪除代碼"main": "index.js",
添加?"build": "webpack"（個(gè)人理解的作用是：原先通過(guò)
npx?webpack?--config?webpack.config.js生成dist目錄下的打包文件，加了這個(gè)代碼后可以用更短的npm?run?build生成打包文件）
在終端執(zhí)行npm?run?build的cmd命令：
安裝和設(shè)置View In Browser并且鼠標(biāo)右鍵用View In Browser執(zhí)行dist中的index.html:
運(yùn)行結(jié)果：
當(dāng)發(fā)給別人的公司我的項(xiàng)目時(shí)，為了保護(hù)我的原創(chuàng)邏輯的知識(shí)版權(quán)，不發(fā)src目錄的內(nèi)容等等
當(dāng)發(fā)給別人的公司等等項(xiàng)目時(shí)，只發(fā)dist文件夾中的文件等等（同時(shí)注釋或刪除
??<script?src="（src目錄下的被打包文件的目錄）"></script>?等同性質(zhì)的代碼），src目錄下的被打包的文件不發(fā)，這樣別人基本只能用我的項(xiàng)目，卻不知道我寫(xiě)的邏輯等等，保護(hù)我的原創(chuàng)邏輯的知識(shí)版權(quán)等等）
暫時(shí)不執(zhí)行的加載字體文件和加載數(shù)據(jù)，xml文件的cmd命令和操作
npm install --save-dev csv-loader xml-loader
（個(gè)人對(duì)這個(gè)cmd命令的理解：下載后在項(xiàng)目中可以加載xml文件中的數(shù)據(jù)，但目前我不用加載數(shù)據(jù)，使用不必執(zhí)行這個(gè)cmd命令）
常用的npm install 安裝模塊的cmd命令
我們?cè)谑褂?npm install 安裝模塊的模塊的時(shí)候 ，一般會(huì)使用下面這幾種命令形式：
視情況而定使用這四個(gè)命令：
npm install moduleName 命令
1. 安裝模塊到項(xiàng)目node_modules目錄下。
2. 不會(huì)將模塊依賴(lài)寫(xiě)入devDependencies或dependencies 節(jié)點(diǎn)。
3. 運(yùn)行 npm install 初始化項(xiàng)目時(shí)不會(huì)下載模塊。
npm install -g moduleName 命令
1. 安裝模塊到全局，不會(huì)在項(xiàng)目node_modules目錄中保存模塊包。
2. 不會(huì)將模塊依賴(lài)寫(xiě)入devDependencies或dependencies 節(jié)點(diǎn)。
3. 運(yùn)行 npm install 初始化項(xiàng)目時(shí)不會(huì)下載模塊。
npm install -save moduleName 命令
1. 安裝模塊到項(xiàng)目node_modules目錄下。
2. 會(huì)將模塊依賴(lài)寫(xiě)入dependencies 節(jié)點(diǎn)。
3. 運(yùn)行 npm install 初始化項(xiàng)目時(shí)，會(huì)將模塊下載到項(xiàng)目目錄下。
4. 運(yùn)行npm install --production或者注明NODE_ENV變量值為production時(shí)，會(huì)自動(dòng)下載模塊到node_modules目錄中。
npm install -save-dev moduleName 命令
1. 安裝模塊到項(xiàng)目node_modules目錄下。
2. 會(huì)將模塊依賴(lài)寫(xiě)入devDependencies 節(jié)點(diǎn)。
3. 運(yùn)行 npm install 初始化項(xiàng)目時(shí)，會(huì)將模塊下載到項(xiàng)目目錄下。
4. 運(yùn)行npm install --production或者注明NODE_ENV變量值為production時(shí)，不會(huì)自動(dòng)下載模塊到node_modules目錄中。
總結(jié)
devDependencies 節(jié)點(diǎn)下的模塊是我們?cè)陂_(kāi)發(fā)時(shí)需要用的，比如項(xiàng)目中使用的 gulp ，壓縮css、js的模塊。這些模塊在我們的項(xiàng)目部署后是不需要的，所以我們可以使用 -save-dev 的形式安裝。像 express 這些模塊是項(xiàng)目運(yùn)行必備的，應(yīng)該安裝在 dependencies 節(jié)點(diǎn)下，所以我們應(yīng)該使用 -save 的形式安裝。
?
devDependencies和dependencies的區(qū)別
網(wǎng)上統(tǒng)一的觀念是
devDependencies用于本地環(huán)境開(kāi)發(fā)的時(shí)候。
dependencies用于發(fā)布環(huán)境（個(gè)人理解為：用于運(yùn)行環(huán)境的時(shí)候）
其實(shí)看名字我也知道是這個(gè)意思，我覺(jué)得沒(méi)解釋情況。?
devDependencies是只會(huì)在開(kāi)發(fā)環(huán)境下依賴(lài)的模塊，生產(chǎn)環(huán)境不會(huì)被打入包內(nèi)。通過(guò)NODE_ENV=developement或NODE_ENV=production指定開(kāi)發(fā)還是生產(chǎn)環(huán)境。?
而dependencies依賴(lài)的包不僅開(kāi)發(fā)環(huán)境能使用，生產(chǎn)環(huán)境也能使用。（個(gè)人理解：devDependencies 是用了駝峰命名法。項(xiàng)目運(yùn)行時(shí)要用就選擇dependencies依賴(lài)，--save。只開(kāi)發(fā)環(huán)境要要用，項(xiàng)目運(yùn)行時(shí)不用，就選擇devDependencies，--save-dev）其實(shí)這句話(huà)是重點(diǎn)，按照這個(gè)觀念很容易決定安裝模塊時(shí)是使用--save還是--save-dev。
