webpack基础系列

首先webpack内置loader只支持js和json格式的文件解析；
webpack是一个模块化打包工具，这里并不只是对于js的模块化，而是整个项目的模块化，便于在开发环境编写维护我们的业务代码，各种兼容问题和处理都交给了webpack去处理；

（一）关于npm的一些介绍：

npm install moduleName 命令

1. 安装模块到项目 node_modules 目录下。\

不会将模块依赖写入 devDependencies 或 dependencies 节点。
运行 npm install 初始化项目时不会下载模块。

npm install -g moduleName 命令

1. 安装模块到全局，不会在项目 node_modules 目录中保存模块包。\

不会将模块依赖写入 devDependencies 或 dependencies 节点。
运行 npm install 初始化项目时不会下载模块。

npm install --save moduleName 命令

安装模块到项目 node_modules 目录下。\
会将模块依赖写入 dependencies 节点。
运行 npm install 初始化项目时，会将模块下载到项目目录下。
运行npm install --production 或者注明 NODE_ENV 变量值为 production 时，会自动下载模块到 node_modules 目录中。

npm install --save-dev moduleName 命令

安装模块到项目 node_modules 目录下。\
会将模块依赖写入 devDependencies 节点。
运行 npm install 初始化项目时，会将模块下载到项目目录下。
运行npm install --production 或者注明 NODE_ENV 变量值为 production 时，不会自动下载模块到 node_modules 目录中。

总结

devDependencies 节点下的模块是我们在开发时需要用的，比如项目中使用的 gulp ，压缩 css、js 的模块。这些模块在我们的项目部署后是不需要的，所以我们可以使用 --save-dev 的形式安装。像 express 这些模块是项目运行必备的，应该安装在 dependencies 节点下，所以我们应该使用 --save 的形式安装。

（二）:webpack入口和出口

webpack4以后的版本，支持0配置打包，默认从src/index =》dist/main.js;
实际开发中，需要更改默认的入口和出口，就可以使用通过webpack.config.js，默认配置文件进行配置；
entry，入口文件地址，output打包后的出口，path：指定打包后文件存放的路径（通过node的path模块，动态去设置）；

（三）工作模式

可以理解成，针对不同环境的几组预设的配置，比如开发环境和生产环境；

如果不在webpack.config.js里面配置，或者在命令行里面设置，则使用默认的模式，production；

例如：本案例，直接执行，会抱警告；webpack默认使用production模式，内部会开启一些优化设置，比如压缩代码。

development开发模式命令行：webpack --mode development

实际在脚手架中，直接在config配置文件里面配置，开发模式打包出来的代码，增加了一些辅助的代码，便于阅读；

还有一种none模式，打包出来就是最原始的代码；

总结：目前三种：production（默认），development，none；

四资源打包 loader

loader是webpack加载不同资源的核心，通过不同的loader加载不同的资源。 css-loadr把css变成js代码，在内部其实是放到一个数组当中，再通过style-loader生成style标签，把css插入到页面；

五导入模块资源

webpack设计理念就是 通过js驱动整个项目，所以通过js导入多需要的任何资源，建立起来依赖关系
保证：1 js确实需要这些资源，比如css 图片，保证逻辑合理性；
      2：确保了线上资源不丢失，都是依赖的；

6:文件资源加载器

比如图片，tff字体等。。。

webpack系列