【笔记】webpack - 基本配置 entry & outputwebpack是一个打包工具，解决了浏览器中不支持re

webpack是什么？

webpack是一个打包工具，解决了浏览器中不支持require, exports的问题。

webpack是nodejs工作流工具，安装时-g全局安装。

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack四个核心概念

入口entry

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项随即被处理，最后输出到称之为 bundles 的文件中。
可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src。
输出output

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程。
通过 output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。可能你想要了解在代码最上面导入的 path 模块是什么，它是一个 Node.js 核心模块，用于操作文件路径。
loader （单独详记）

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
【注意】loader 能够 import 导入任何类型的模块（例如 .css 文件），这是 webpack 特有的功能，其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是有很必要的，因为这可以使开发人员创建出更准确的依赖关系图。
插件plugins（单独详记）

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务

webpack安装

npm i -g webpack
npm i -g webpack-cli

注意：一定要知道，webpack的底层是nodejs，它在调用nodejs的服务

P.S. -g安装的东西都将成为cmd窗口中的命令

我们为什么需要Webpack打包？

因为浏览器不支持require。
我们可以试着用我们已经学过的暴露和引用直接写一个页面试试看：

先只引入口mian.js看看结果：

再把所有包都引入看看：

以上这种我们之前学习的暴露、引入的写法是CMD规范写法，仅限于可被CMD执行，浏览器不支持这样的写法。要使程序能够被浏览器执行，我们就需要使用Webpack将所有包打包起来。

怎样使用Webpack打包模块？

① 在项目目录中新建一个webpack.config.js文件；
② 在文件中写入如下代码：

const path = require("path");
module.exports = {
mode: "development",
entry: "./app/mian.js",
output: {
filename: "bundle.js",
path: "dist",
},
watch: true
}

③ 在CMD窗口项目目录下输入指令webpack。
打包完成后项目目录中会自动生成一个dist文件夹，里面的bundle.js文件就是webpack处理后的我们所打包的所有包的集成，html引包时引bundle.js即可。

webpack.config.js文件指导webpack如何工作，里面包括你的模式mode，入口entry，输出物output，是否实时监控文件变化watch。

实时监控文件变化watch的作用是每当app中任何一个包里的代码发生改变并保存dist文件夹也会自动随之更新。向甲方交付项目时只要提交写好的页面及dist文件夹便能使项目正常运行，无需交付源代码。

webpack-dev-server

我们平时编程的习惯是不断保存以防数据意外丢失，但在修改项目时频繁保存会让硬盘频繁读写同一个文件而导致硬盘损坏（蓝屏），webpack-dev-server可以解决这一问题帮助我们保护硬盘，并且项目中有AJAX需求时，webpack-dev-sever可以为我们提供服务器环境。 webpack-dev-server实际上就是webpack development sever的缩写，即webpack开发服务器，是一个工具。
webpack-dev-server的作用：
① 虚拟打包，不实质上生成dist文件夹，不实质上生成bundle.js文件；
② 为调试AJAX提供服务器环境。

安装webpack-devsever: