webpack项目构建： 安装模块的cmd命令，devDependencies，dependencies【诗书画唱】
这篇专栏从开始写到写完前前后后几乎花了我2天的时间！十分实用的内容！求三连和推荐！
目录：
构建一个webpack项目。
1、在页面上创建一个div，设置div的高度和宽度，并且添加背景图片。
2、在这个div中添加一个Img标签，给他添加一张图片。
3、（选做）将贪吃蛇代码添加到webpack项目中，并且运行这个游戏。
我自己给出的答案
当发给别人的公司我的项目时，为了保护我的原创逻辑的知识版权，不发src目录的内容等等
暂时不执行的加载字体文件和加载数据，xml文件的cmd命令和操作
常用的npm install 安装模块的cmd命令
devDependencies和dependencies的区别
个人理解：
npm install moduleName --save 命令
1. 安装模块到项目node_modules目录下。
2. 会在package.json文件的dependencies 属性将模块依赖写入。
3. 运行 npm install 初始化项目时，会将模块下载到项目目录下。
4. 运行npm install --production或者注明NODE_ENV变量值为production时，会自动下载模块到node_modules目录中。
npm install moduleName --save-dev 命令
1. 安装模块到项目node_modules目录下。
2. 会在package.json文件的devDependencies 属性将模块依赖写入。
3. 运行 npm install 初始化项目时，会将模块下载到项目目录下。
4. 运行npm install --production或者注明NODE_ENV变量值为production时，不会自动下载模块到node_modules目录中。
devDependencies用于本地环境开发的时候。
dependencies用于发布环境（个人理解为：用于运行环境的时候）
个人理解：devDependencies 是用了驼峰命名法。项目运行时要用就选择dependencies依赖，--save。只开发环境要要用，项目运行时不用，就选择devDependencies，--save-dev
构建一个webpack项目。
1、在页面上创建一个div，设置div的高度和宽度，并且添加背景图片。
2、在这个div中添加一个Img标签，给他添加一张图片。
3、（选做）将贪吃蛇代码添加到webpack项目中，并且运行这个游戏。
我自己给出的答案
创建空文件夹：
把要安装的模块等等一次性用cmd命令安装：
npm install --global webpack
（个人对这个cmd命令的理解：这个cmd命令是用了全局安装 webpack的。或npm install webpack --global 或 npm install webpack -g，-g和--global都表示全局安装，安装后以后就可以不用再安装了，达到一劳永逸的效果。-后面接长字符串，--后面接短字符串，个人理解成是一种习惯风格， --global 或-g的在cmd命令的位置可以自定义，总之不一定在结尾，空格等的方面要注意不用写错了。）
npm config ls
（个人对这个cmd命令的理解：查看模块等等都会安装在什么目录的信息。）
npm init -y
（个人对这个cmd命令的理解：初始化npm，自动在项目的目录下生成package.json的文件）
npm install webpack webpack-cli --save-dev
（个人对这个cmd命令的理解：自动在项目的目录下生成package-lock.json文件和node_modules文件夹和里面的内容，即为安装webpack-cli脚手架，此工具用于在命令行中运行 webpack。现实中的脚手架是施工现场为工人操作并解决垂直和水平运输而搭设的一种临时性的建筑工具，我理解这个cmd命令中的脚手架是类似于控制webpack的运行的控制器一般的工具。）
npm install --save-dev style-loader css-loader
（个人对这个cmd命令的理解：下载样式加载模块，即为安装并添加 style-loader 和 css-loader，这样才可以从 JavaScript 模块中 import 一个 CSS 文件）
npm install file-loader url-loader --save-dev
（个人对这个cmd命令的理解：下载图片加载模块，使用 file-loader，我们可以轻松地将这些内容混合到 CSS 中。个人认为这样代码更安全，相当于加密了，别人就难盗取项目中原创的逻辑等等）
npm install path --save
(个人对这个cmd命令的理解：下载path模块。)
创建配置文件：
webpack.config.js
//webpack.config.js
//path模块是用来操作文件路径的核心模块
//npm install path --save
const path = require('path');
//每个js文件都有一个module对象，存放模块需要导出的值和函数
module.exports = {
//./表示当前webpack.config.js文件所在的文件夹
//指定项目构建的入口文件是src/index.js
entry: './src/index.js',
output: {
//指定打包以后生成的文件名是什么
filename: 'bundle.js',
//__dirname指的是当前的根目录
//指定打包以后生成的文件存放的位置
path: path.resolve(__dirname,'dist')
},
module: {
rules: [
{
//对于项目中以.css结尾的所有的文件都使用
//style-loader和css-loader进行解析
test: /\.css$/,
use: ['style-loader','css-loader']
},
{
//对项目中以.png,.gif,.jpg,.svg结尾的文件都使用
//file-loader进行解析
test: /\.(png|gif|jpg|svg)$/,
use: ['file-loader']
}
]
}
};
创建src中的被打包文件和dist中的将使用打包文件的文件（打包文件会自动生成到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>
<!-- 会自动生成到dist目录下的打包文件是bundle.js ：-->
<script src="bundle.js"></script>
<!-- 引入src中的被打包文件index.js
（其中src中的css文件等等通过import等等导入到了index.js文件中，
一起被打包）：
如果不使用引入和自动在dist目录下生成的打包文件，就会出现没有效果等等的情况-->
<script src="../src/index.js"></script>
</body>
</html>
//该index.js文件的目录：src/index.js
//使用import引入css文件：
import './my.css';
//创建名称为div1和div的div：
let div1= document.createElement('div');
let div = document.createElement('div');
/*下面的话，必须要用classList才让css中可以使用类选择器,
classList.add('div1')相当于html中声明class="div1"：*/
div1.classList.add('div1');
//把div1添加到div中：
div.appendChild(div1);
//下面的代码就是创建图片的js代码：
//引入图片也要用import,同时要用from来声明要引入的图片路径：
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"（个人理解的作用是：原先通过
npx webpack --config webpack.config.js生成dist目录下的打包文件，加了这个代码后可以用更短的npm run build生成打包文件）
在终端执行npm run build的cmd命令：
安装和设置View In Browser并且鼠标右键用View In Browser执行dist中的index.html:
运行结果：
当发给别人的公司我的项目时，为了保护我的原创逻辑的知识版权，不发src目录的内容等等
当发给别人的公司等等项目时，只发dist文件夹中的文件等等（同时注释或删除
<script src="（src目录下的被打包文件的目录）"></script> 等同性质的代码），src目录下的被打包的文件不发，这样别人基本只能用我的项目，却不知道我写的逻辑等等，保护我的原创逻辑的知识版权等等）
暂时不执行的加载字体文件和加载数据，xml文件的cmd命令和操作
npm install --save-dev csv-loader xml-loader
（个人对这个cmd命令的理解：下载后在项目中可以加载xml文件中的数据，但目前我不用加载数据，使用不必执行这个cmd命令）
常用的npm install 安装模块的cmd命令
我们在使用 npm install 安装模块的模块的时候 ，一般会使用下面这几种命令形式：
视情况而定使用这四个命令：
npm install moduleName 命令
1. 安装模块到项目node_modules目录下。
2. 不会将模块依赖写入devDependencies或dependencies 节点。
3. 运行 npm install 初始化项目时不会下载模块。
npm install -g moduleName 命令
1. 安装模块到全局，不会在项目node_modules目录中保存模块包。
2. 不会将模块依赖写入devDependencies或dependencies 节点。
3. 运行 npm install 初始化项目时不会下载模块。
npm install -save moduleName 命令
1. 安装模块到项目node_modules目录下。
2. 会将模块依赖写入dependencies 节点。
3. 运行 npm install 初始化项目时，会将模块下载到项目目录下。
4. 运行npm install --production或者注明NODE_ENV变量值为production时，会自动下载模块到node_modules目录中。
npm install -save-dev moduleName 命令
1. 安装模块到项目node_modules目录下。
2. 会将模块依赖写入devDependencies 节点。
3. 运行 npm install 初始化项目时，会将模块下载到项目目录下。
4. 运行npm install --production或者注明NODE_ENV变量值为production时，不会自动下载模块到node_modules目录中。
总结
devDependencies 节点下的模块是我们在开发时需要用的，比如项目中使用的 gulp ，压缩css、js的模块。这些模块在我们的项目部署后是不需要的，所以我们可以使用 -save-dev 的形式安装。像 express 这些模块是项目运行必备的，应该安装在 dependencies 节点下，所以我们应该使用 -save 的形式安装。
devDependencies和dependencies的区别
网上统一的观念是
devDependencies用于本地环境开发的时候。
dependencies用于发布环境（个人理解为：用于运行环境的时候）
其实看名字我也知道是这个意思，我觉得没解释情况。
devDependencies是只会在开发环境下依赖的模块，生产环境不会被打入包内。通过NODE_ENV=developement或NODE_ENV=production指定开发还是生产环境。
而dependencies依赖的包不仅开发环境能使用，生产环境也能使用。（个人理解：devDependencies 是用了驼峰命名法。项目运行时要用就选择dependencies依赖，--save。只开发环境要要用，项目运行时不用，就选择devDependencies，--save-dev）其实这句话是重点，按照这个观念很容易决定安装模块时是使用--save还是--save-dev。
