webpack
学习webpack之前，我们应该了解一下什么是webpack
webpack 可以看做是 模块打包机。它做的事情是，分析你的项目结构，找到 JavaScript模块以及其它的一些浏览器不能直接运行的扩展语言（如：Scss，TypeScript 等），并将其打包为合适的格式以供浏览器使用。
那么它能够做一些什么事情呢?
代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布等。
那么接下来就让我们一起来学习吧！加油！！！
安装 webpack
- 安装本地的 webpack
- 现在webpack的版本是 4.x 的，webpack 和 webpack-cli 分开管理了，需要两个都安装。在终端中进入你的项目中输入命令：
yarn add webpack webpack-cli -D
既然大家都学到 webpack 了，相信大家都知道终端，也知道怎么运行了。
- 这里的 -D：表示 上线的时候不需要这两个包（这两个包都是开发依赖）
- 注意：安装 webpack 之前先要初始化 项目：
yarn init -y，输入命令并执行，会生成 package.json 文件（package.json 是记录安装模块的数量）
完成上面的步骤之后，你的项目的目录结构应该是这样的：
webpack 可以进行零配置，但是很弱。
-
打包工具（需要打包的目录 ， 一般在 src） -> 输出后的结果 （js模块）
-
打包 （支持 js 的模块化）
-
运行 webpack 的命令：
npx webpack
上面说的是什么意思呢？那么让我们一步步的来看。
上面说到 我们需要打包的目录，就是那个目录下面的那些文件需要打包，一般是在 src 目录下面：
- 那么，在我们的项目中新建一个 src 目录，并在 src 目录中新建一个 index.js 文件，在这个 js 文件中写一个输出的语句。
接下来我们来打包一下试一试，看看不配置 webpack 是否可以打包成功！运行命令：
npx webpack,并执行.
我们可以看到，是能够打包的 在 dist 目录下面生成了一个 main.js 文件。那么我们点开看一下这个文件中的内容。如图：
打包之后的 js 文件，这就说明 我们的 webpack 不用进行配置也是可以打包的。
那么接下来让我们来学习 如何手动配置 webpack
- 默认配置文件的名字：
webpack.config.js or webpackfile.js有两种，一般我们用第一种 。在我们项目的根目录下建立配置文件。
webpack 是 node 写出来的，需要用 node 的写法来运行。
简单配置文件：
let path = require('path') //引入内置的 path 模块
module.exports = {
mode: 'production', //模式：这里有两种模式 production(生产模式)(打包后压缩的代码)
// development(开发模式)
entry: './src/index.js', // 入口（从哪个地方开始打包）
output: { //出口
filename: 'bundle.js', //打包后的的文件名
path: path.resolve(__dirname, 'build') //路径，打包后的文件存放的地方 。 要求：路径必须是一个绝对路径
// resolve() 解析：可以把相对路径解析成绝对路径。
}
}
那么，写好简单的配置文件之后，让我们在来 运行一下 webpack。
现在打包出来的文件夹名字为 build，打包出来的 js 文件为 bundle.js，跟咱们的配置文件对应起来了。说明配置文件起作用了，可以把那个 dist 文件夹删除了。
接下来，让我们在 package.json 中配置一些脚本，来执行 webpack 和 webpack-cli。
我们先打开 package.json 文件看一下：
目前的 package.json 文件内容是上图的样子，接下来让我们配置一些脚本：
{
"name": "webpack-dev-1",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
// 这里是添加的脚本
"scripts": {
// 这个 webpack 是执行的node-modules 里面的 webpack
"build": "webpack --config webpack.config.js",
},
"devDependencies": {
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10"
}
}
配置完脚本之后 ，启动 webpack 的命令 为：
npm run build. 我们在终端输入这条命令，同样可以启动 webpack。
webpack 开发服务的配置
-
webpack 内置开发服务：
yarn add webpack-dev-server -D(安装开发服务，它也是开发依赖) -
运行开发服务的命令：
npx webpack-dev-server -
好处：它并不会去真实的打包文件，它只是生成了一个内存中的打包。
-
安装好之后，我们来运行一下看一看：输入命令
npx webpack-dev-server执行如下图：
它会给我们生成一个服务器的地址，我们直接访问这个地址就可以访问到我们的页面，如图：
当然，因为我们没有在配置文件中配置开发服务，现在访问到的是我们项目的根目录，那我们接下来配置一下我们的开发服务。
module.exports = {
devServer: { //开发服务器的配置
port: 3000, //端口配置
contentBase: './build' // 以 build 目录作为我们的静态服务(直接访问我们的 build 目录)
},
mode: 'production', //模式：这里有两种模式 production(生产模式)(打包后压缩的代码)
// development(开发模式)
entry: './src/index.js', // 入口（从哪个地方开始打包）
output: { //出口
filename: 'bundle.js', //打包后的的文件名
path: path.resolve(__dirname, 'build') //路径，打包后的文件存放的地方 。 要求：路径必须是一个绝对路径
// resolve() 解析：可以把相对路径解析成绝对路径。
}
}
当然，开发服务中还有一些配置，我这里就不一一说了，想要了解的可以自行百度。那么，现在在让我们运行一下服务。 在这里说一下 你如何退出当前服务 ctrl+c 可以退出当前服务。
现在我们直接进入到了 build 目录下，这是对的。那么，有同学就问了这样就完了吗？当然不是了，为什么会出现上图这种情况呢，因为它默认是进入到 build 目录下面去找 index.html 文件，但是我们现在没有 html文件，我们现在要做的就是打开 build 目录，在下面新建一个 index.html 文件，然后将打包后的 js文件引入进去，如图：
这时候我们在重新运行服务，然后打开浏览器去看页面 现在页面的内容是空白的，因为我们没有再 index.html 文件中写内容，按F12 打开控制台： 可以看到有一句 Hello World，这是因为这句话是我们在 js 中输出的内容，这就表明我们引入成功。
有的同学说 ，这个运行服务的命令太长了，记不住。
没关系，我们还可以在 package.json 文件中 配置我们运行服务的脚本：
{
"name": "webpack-dev-1",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
// 这里是添加的脚本
"scripts": {
// 这个 webpack 是执行的node-modules 里面的 webpack
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server" //开发服务器配置
},
"devDependencies": {
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10"
}
}
配置完脚本之后，我们运行服务的命令就可以是：npm run dev .
