原始或较完善的webpack项目构建，安装，npm run build，cmd命令，配置【诗书画唱】
目录：
个人构建一个“原始”且“有局限性”的webpack项目的记录
src目录下的被打包文件就算被引入到dist目录下的index.html文件中，也是无法对dist目录下的index.html文件起作用的，只有通过cmd命令后自动在dist文件夹目录下生成的打包文件main.js才能对dist目录下的index.html文件起作用。引入被打包文件到dist目录下的index.html文件的代码也可以不注释掉，因为后面可能要对被打包的js文件进行一些修改，后面要重新生成新的打包文件。
在dist目录下的index.html或其他的要被作用的文件中要写：能够引入将通过cmd命令生成的打包文件的main.js等代码，能够引入src中要被打包的文件的代码。
被打包的css文件自己创建，一般要打包的文件都是创建在src的目录下的。
在package.json文件中添加"build": "webpack"代码让自己可以用npm run build代替npx webpack --config webpack.config.js
加载CSS文件，加载图片，加载字体，加载数据的添加了配置文件的较为完善的webpack项目
学习记录
webpack就是打包器
bundle
bundle理解为js文件
个人理解：在使用webpack后，会把所有js，css代码整合，转化成一个很长的单行代码的js文件。
修改用view in browser打开html文件的浏览器的方法
Lodash （音译：楼带许）是一个一致性、模块化、高性能的 JavaScript 实用工具库。
关于webpack中严格的命名要求
关于--global和-g，--和-的详解
个人构建一个“原始”且“有局限性”的webpack项目的记录
1
创建空文件夹，后用VScode打开这个文件夹（注意命名项目时不可以有大写字母等等，并且目录中最好不要有中文，数字只在结尾有，图片等等都不可以出现中文，路径不可以错，可以尝试用下划线命名项目名字......，其实很多模块都可以先用带-g的cmd命令一次性全局安装，以后就不用再安装了，webpack-cli脚手架等等只在这个项目使用就不用全局安装）
2
终端输入npm install --global webpack（安装webpack）
使用npm config ls的cmd的命令来查看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或其他的要被作用的文件中要写：能够引入将通过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
一个简单的webpack项目就完成了！但是这个有缺点！我认为这个缺点就“：目前只能打包js文件，一些文件的名字是不能自定义，并且因为不存在配置文件，所以一些内容不可以被配置文件管理资源，
所以我以后一般不会用这种“原始”的方法创建webpack项目（不过这个创建的操作不是说没有，而是不够完善！下面在创建这个项目的基础中，我将完善这个原始的文件，将添加配置文件和能够打包css等的文件）！
在package.json文件中添加"build": "webpack"代码让自己可以用npm run build代替npx webpack --config webpack.config.js
加载CSS文件，加载图片，加载字体，加载数据的添加了配置文件的较为完善的webpack项目
修改下项目名——>
注意：如果你是新建完善的webpack的项目的话就不用进行我复制基础原始的webpack项目，修改项目名等的操作。
1
npm install --save-dev style-loader css-loader
2
npm install path --save
被打包的css文件自己创建，一般要打包的文件都是创建在src的目录下的。
/*src/my.css*/
.div1 {
width: 100px;
height: 100px;
/* background-color: red; */
background-image: url("hanser.jpg");
/*————>图片位置和my.jpg在同级目录中，所以路径等等直接写图片名称就可以。
图片的名称不可以为中文。暂时现在每次设置
被打包的文件的内容后都要用npm run build
重新构建*/
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 = '给诗书画唱三连！';
//下面的话，必须要用classList才让css中可以使用类选择器：
h1.classList.add('bg');
div.appendChild(h1);
/*下面的话，必须要用classList才让css中可以使用类选择器,
classList.add('div1')相当于html中声明class="div1"：*/
div1.classList.add('div1');
div.appendChild(div1);
//下面的代码就是创建图片的js代码：
//引入图片也要用import,同时要用from来声明要引入的图片路径：
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
学习记录
npm install --global webpack
https://www.bilibili.com/video/BV1D64y1y7Dv?share_source=copy_web
webpack就是打包器
Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
bundle理解为js文件。
个人理解：在使用webpack后，会把所有js，css代码整合，转化成一个很长的单行代码的js文件。
bundle
Lodash （音译：楼带许）是一个一致性、模块化、高性能的 JavaScript 实用工具库。
Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于：
遍历 array、object 和 string
对值进行操作和检测
创建符合功能的函数
详解classList
在HTML5 API里，页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList，程序员还可以用它来判断某个节点是否被赋予了某个CSS类。
关于webpack中严格的命名要求
不可以使用大写的字母，使用命名项目时驼峰命名法就没有太大的作用了，但是可以尝试用下划线的命名方法。
关于--global和-g，--和-的详解
--global和-g本质上是一样的写法，可以再安装的cmd命令中的任意位置，全局安装后就是一劳永逸，以后都不用再安装。
npm install --global webpack和npm install webpack --global
npm install webpack -g
npm install -g webpack
的写法都可以。
