Webpack的构建流程
Webpack的构建流程：
Webpack启动后，从entry开始，去递归解析entry依赖的所有module，再找到每一个module的时候，会根据module.rules里配置的不同loader进行相应的转换，对module进行转换后再解析出当前module依赖的其他的一些模块，这些module在entry里面，它会进行分组，解析成一个个的chunk，最后webpack会将所有chunk转换成文件输出的output，在整个构建流程中，通过plugin注入钩子，最后输出多个模块组合成的文件。
webpack，一个静态模块打包器(modulebundler)。bundle your assets（打包你的静态资源）。
前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。
webpack 五个核心概念：
入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
Loader(加载器) 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)
插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
模式(Mode)指示 webpack 使用相应模式的配置。develop模式，production模式，不同的运行环境上线运行。
引入的资源交给构建工具。--- loader来处理
index.js ==> jq,less形成依赖关系图。引进来形成 ===> chunk.js(代码块) ===>{ less=>css, js=>js} ，这个过程就叫做打包，打包后输出的东西，叫做bundle（捆成一批）
一句话形容webpack：根据入口文件entry的依赖关系（内部依赖图），将这些资源全部引进来，引进来形成chunk代码块，chunk会根据不同的资源进行处理，这个处理过程叫打包；输出的东西，叫做bundle。
npm run build 打包指令。
所有的构建工具都是基于nodejs来运行的。模块化默认采用commonjs标准
1. webpack可以处理js,json的代码。不能处理css，image，需要借助各种loader来处理。
生成环境比开发环境多一个压缩js的代码（import xxx from xxx），将es6编译成浏览器能识别的模块化。
2. 目录 ：
src{} 项目代码，es6模块化
build{ built.js}
webpack.config.js {}（webpack配置文件，指示webpack干哪些活，当你运行指令时，会加载里面的配置。）配置代码，commonjs标准。
3. webpack.config.js {} 规范：
commonjs标准通过module.exports={}来暴露
const { resolve } = require('path'); // 绝对路径，resolve 用来拼接绝对路径的方法
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入html-webpack-plugin
module.exports = {
entry: './src/js/index.js',
// 入 口 文 件
output: {
// 输 出 配 置
filename: './built.js',
// 输 出 文 件 名
path: resolve(__dirname, 'build/js') [ __dirname ，文件的目录绝对路径]
// 输 出 文 件 路 径 配 置
},
module: {
rules: [
// 详细 loader 配置，不同文件必须配置不同 loader 处理
{
test: /\.css$/, //匹配哪些文件，使用哪些 loader 进行处理
use:[
// use 数组中 loader 执行顺序：从右到左，从下到上 依次执行
// 创建 style 标签，将 js 中的样式资源插入进行，添加到 head 中生效
‘style-loader’,
// 将 css 文件变成 commonjs 模块加载 js 中，里面内容是样式字符串
‘css-loader’/
]
},
{
test: /\.less$/,
use:[
‘style-loader’,
‘css-loader’,
// 将 less 文件编译成 css 文件
// 需要下载 less-loader 和 less
'less-loader'
]
}
]
};
plugins:[
// 打包HTML资源
// html-webpack-plugin
new HtmlWebpackPlugin()
],
mode: 'development'
// 开 发 环 境
// mode: 'production'
// 生 成 环 境
}
运行指令：
npm i webpack webpack-cli -D
npm i css-loader style-loader -D
npm i css-loader style-loader less-loader less-D // 包都在文件夹最外面下载
打包指令:webpack
webpack原理：
根据入口文件entry的依赖关系（内部依赖图），将这些资源全部引进来，通过module里面的rules中的loader，进行处理每一个资源，而loader又是从下往上执行的。css-loader以commonjs模块来整合到相应的js中来，里面的内容是样式字符串。当你在页面中打开，它会创建sytle标签，将 js 中的样式资源插入进行，添加到 head 中生效 。输出路径由output来执行。
webpack 本身具备了诸多优点：从单一入口出发，打包所有前端资源，使用 loader 处理多种代码语言的转换，使用 plugin 扩展原有的模块打包流程，使用 HMR 提升开发体验，利用代码压缩和代码分割来提升前端加载性能等等。
