原始或較完善的webpack項(xiàng)目構(gòu)建，安裝，npm run build，cmd命令，配置【詩(shī)書畫唱】
目錄：
個(gè)人構(gòu)建一個(gè)“原始”且“有局限性”的webpack項(xiàng)目的記錄
src目錄下的被打包文件就算被引入到dist目錄下的index.html文件中，也是無(wú)法對(duì)dist目錄下的index.html文件起作用的，只有通過(guò)cmd命令后自動(dòng)在dist文件夾目錄下生成的打包文件main.js才能對(duì)dist目錄下的index.html文件起作用。引入被打包文件到dist目錄下的index.html文件的代碼也可以不注釋掉，因?yàn)楹竺婵赡芤獙?duì)被打包的js文件進(jìn)行一些修改，后面要重新生成新的打包文件。
在dist目錄下的index.html或其他的要被作用的文件中要寫：能夠引入將通過(guò)cmd命令生成的打包文件的main.js等代碼，能夠引入src中要被打包的文件的代碼。
被打包的css文件自己創(chuàng)建，一般要打包的文件都是創(chuàng)建在src的目錄下的。
?在package.json文件中添加"build":?"webpack"代碼讓自己可以用npm?run?build代替npx?webpack?--config?webpack.config.js
加載CSS文件，加載圖片，加載字體，加載數(shù)據(jù)的添加了配置文件的較為完善的webpack項(xiàng)目
學(xué)習(xí)記錄
webpack就是打包器
bundle
bundle理解為js文件
個(gè)人理解：在使用webpack后，會(huì)把所有js，css代碼整合，轉(zhuǎn)化成一個(gè)很長(zhǎng)的單行代碼的js文件。
修改用view in browser打開html文件的瀏覽器的方法
Lodash （音譯：樓帶許）是一個(gè)一致性、模塊化、高性能的 JavaScript 實(shí)用工具庫(kù)。
關(guān)于webpack中嚴(yán)格的命名要求
關(guān)于--global和-g，--和-的詳解
個(gè)人構(gòu)建一個(gè)“原始”且“有局限性”的webpack項(xiàng)目的記錄
1
創(chuàng)建空文件夾，后用VScode打開這個(gè)文件夾（注意命名項(xiàng)目時(shí)不可以有大寫字母等等，并且目錄中最好不要有中文，數(shù)字只在結(jié)尾有，圖片等等都不可以出現(xiàn)中文，路徑不可以錯(cuò)，可以嘗試用下劃線命名項(xiàng)目名字......，其實(shí)很多模塊都可以先用帶-g的cmd命令一次性全局安裝，以后就不用再安裝了，webpack-cli腳手架等等只在這個(gè)項(xiàng)目使用就不用全局安裝）
2
終端輸入npm install --global webpack（安裝webpack）
使用npm config ls的cmd的命令來(lái)查看webpack的安裝目錄
3
終端輸入npm?init -y（初始化npm）
4
終端輸入npm install webpack webpack-cli --save-dev（安裝webpack-cli腳手架）
5
<!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>
????<script?src="main.js"></script>
????<script?src="../src/index.js"></script>
</body>
</html>
在dist目錄下的index.html或其他的要被作用的文件中要寫：能夠引入將通過(guò)cmd命令生成的打包文件的main.js等代碼，能夠引入src中要被打包的文件的代碼。
//src/index.js
let?ele?=document.createElement('div');
let?h1?=?document.createElement('h1');
h1.?innerHTML?='Hello?world';
ele.appendChild(h1);
document.body.appendChild(ele);
6
添加代碼"private": true,
刪除代碼"main": "index.js",
npx webpack
7
一個(gè)簡(jiǎn)單的webpack項(xiàng)目就完成了！但是這個(gè)有缺點(diǎn)！我認(rèn)為這個(gè)缺點(diǎn)就“：目前只能打包js文件，一些文件的名字是不能自定義，并且因?yàn)椴淮嬖谂渲梦募?，所以一些?nèi)容不可以被配置文件管理資源，
所以我以后一般不會(huì)用這種“原始”的方法創(chuàng)建webpack項(xiàng)目（不過(guò)這個(gè)創(chuàng)建的操作不是說(shuō)沒(méi)有，而是不夠完善！下面在創(chuàng)建這個(gè)項(xiàng)目的基礎(chǔ)中，我將完善這個(gè)原始的文件，將添加配置文件和能夠打包c(diǎn)ss等的文件）！
?在package.json文件中添加"build":?"webpack"代碼讓自己可以用npm?run?build代替npx?webpack?--config?webpack.config.js
加載CSS文件，加載圖片，加載字體，加載數(shù)據(jù)的添加了配置文件的較為完善的webpack項(xiàng)目
修改下項(xiàng)目名——>
注意：如果你是新建完善的webpack的項(xiàng)目的話就不用進(jìn)行我復(fù)制基礎(chǔ)原始的webpack項(xiàng)目，修改項(xiàng)目名等的操作。
1
npm install --save-dev style-loader css-loader
2
npm?install?path?--save
被打包的css文件自己創(chuàng)建，一般要打包的文件都是創(chuàng)建在src的目錄下的。
/*src/my.css*/
.div1?{
????width:?100px;
????height:?100px;
????/*?background-color:?red;?*/
???background-image:??url("hanser.jpg");
???/*————>圖片位置和my.jpg在同級(jí)目錄中，所以路徑等等直接寫圖片名稱就可以。
???圖片的名稱不可以為中文。暫時(shí)現(xiàn)在每次設(shè)置
???被打包的文件的內(nèi)容后都要用npm?run?build
???重新構(gòu)建*/
???background-size:?cover;
}
.bg?{
color:?red;
}
3
//該index.js文件的目錄：src/index.js
//使用import引入css文件：
import?'./my.css';
let?div1=?document.createElement('div');
let?div?=?document.createElement('div');
let?h1?=?document.createElement('h1');
h1.innerHTML?=?'給詩(shī)書畫唱三連！';
//下面的話，必須要用classList才讓css中可以使用類選擇器：
h1.classList.add('bg');
div.appendChild(h1);
/*下面的話，必須要用classList才讓css中可以使用類選擇器,
classList.add('div1')相當(dāng)于html中聲明class="div1"：*/
div1.classList.add('div1');
div.appendChild(div1);
//下面的代碼就是創(chuàng)建圖片的js代碼：
//引入圖片也要用import,同時(shí)要用from來(lái)聲明要引入的圖片路徑：
import?icon?from?'./hanser.jpg';
let?i?=?new?Image();
i.src?=?icon;
div.appendChild(i);
document.body.appendChild(div);
npm?run?build
修改用view in browser打開html文件的瀏覽器的方法
?npm run build
學(xué)習(xí)記錄
npm?install?--global?webpack
https://www.bilibili.com/video/BV1D64y1y7Dv?share_source=copy_web
webpack就是打包器
Webpack 可以將多種靜態(tài)資源 js、css、less 轉(zhuǎn)換成一個(gè)靜態(tài)文件，減少了頁(yè)面的請(qǐng)求。
bundle理解為js文件。
個(gè)人理解：在使用webpack后，會(huì)把所有js，css代碼整合，轉(zhuǎn)化成一個(gè)很長(zhǎng)的單行代碼的js文件。
bundle
Lodash （音譯：樓帶許）是一個(gè)一致性、模塊化、高性能的 JavaScript 實(shí)用工具庫(kù)。
Lodash 通過(guò)降低 array、number、objects、string 等等的使用難度從而讓 JavaScript 變得更簡(jiǎn)單。 Lodash 的模塊化方法 非常適用于：
遍歷 array、object 和 string
對(duì)值進(jìn)行操作和檢測(cè)
創(chuàng)建符合功能的函數(shù)
詳解classList
在HTML5 API里，頁(yè)面DOM里的每個(gè)節(jié)點(diǎn)上都有一個(gè)classList對(duì)象，程序員可以使用里面的方法新增、刪除、修改節(jié)點(diǎn)上的CSS類。使用classList，程序員還可以用它來(lái)判斷某個(gè)節(jié)點(diǎn)是否被賦予了某個(gè)CSS類。
關(guān)于webpack中嚴(yán)格的命名要求
不可以使用大寫的字母，使用命名項(xiàng)目時(shí)駝峰命名法就沒(méi)有太大的作用了，但是可以嘗試用下劃線的命名方法。
關(guān)于--global和-g，--和-的詳解
--global和-g本質(zhì)上是一樣的寫法，可以再安裝的cmd命令中的任意位置，全局安裝后就是一勞永逸，以后都不用再安裝。
npm install --global webpack和npm install webpack?--global?
npm install?webpack?-g
npm install?-g?webpack?
的寫法都可以。
