webpack快速入门

webpack:它做的事情是，分析你的项目结构；
构建项目：就是把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括如下内容。

构建就是把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括如下内容。
1.代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
2.文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
3.代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
4.模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
5.自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
6.代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
7.自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

快速配置
核心概念
1.Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
2.Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。3.Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
4.Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
5.Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
6.Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
7.Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。
webpack的工作流程：
1 Webpack 启动后会从Entry里配置的Module开始递归解析 Entry 依赖的所有 Module。
2 每找到一个 Module， 就会根据配置的Loader去找出对应的转换规则，对 Module 进行转换后，再解析出当前 Module 依赖的 Module。
3 这些模块会以 Entry 为单位进行分组，一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk。
4 最后 Webpack 会把所有 Chunk 转换成文件输出。 在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。

配置webpack
1.初始化项目：
指令：npm init -y
执行后会为工程生成 package.json文件
工程结构：
webpack-demo
package.json
|- dist
|- /src
2.安装webpack
安装到本地环境
指令：npm install webpack webpack-cli --save-dev
3.创建工程的入口文件：
index.js,index.html
webpack-demo
package.json
|- dist
|- index.html
|- /src
|- index.js
4.打包资源文件index.js
方式一：单个资源打包
指令：npx webpack
默认会把src目录下的index.js，打包成 main.js 存放在dist目录
webpack-demo
package.json
|- dist
|- index.html
|- main.js
|- /src
|- index.js
方式二：配置文件 webpack.config.js
webpack.config.js支持node语法
举例：配置文件打包，可以同时配置多个资源
//node方式加载 path模块
const path = require(‘path’);
module.exports = {
//要打包的js文件
entry: ‘./src/index.js’,
output: {
filename: ‘main.js’,//打包生成的文件名称
path: path.resolve(__dirname, ‘dist’)//打包生成文件存放路径
}
};
执行配置文件（因为配置文件是js文件，所以可以执行）：
指令：npx webpack --config webpack.config.js
注意：
1.如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它。
2.我们在这里使用 --config 选项只是向你表明，可以传递任何名称的配置文件。
这对于需要拆分成多个文件的复杂配置是非常有用。
方式三：调整 package.json文件
考虑到用 CLI 这种方式来运行本地的 webpack 副本并不是特别方便，我们可以设置一个快捷方式。
调整 package.json 文件，添加在 npm scripts 中添加一个 npm 命令：
package.json
{
“name”: “webpack-demo”,
“version”: “1.0.0”,
“description”: “”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
+ “build”: “webpack”
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
“webpack”: “^4.20.2”,
“webpack-cli”: “^3.1.2”
},
“dependencies”: {
“lodash”: “^4.17.5”
}
}
现在，可以使用 npm run build 命令，来替代我们之前使用的 npx 命令。
注意
1.使用 npm scripts，我们可以像使用 npx 那样通过模块名引用本地安装的 npm packages。
2.大多数基于 npm 的项目遵循的标准，因为它允许所有贡献者使用同一组通用脚本（如果必要，每个 flag 都带有 --config 标志）。