Webpack 是基于node编写的,可以看作是模块打包机。它所做的是，分析项目结构，找到js模块以及其他一些浏览器不能直接运行的扩展语言（Scss,TS等），并将其打包成为合适的格式以便供浏览器使用。
总之一句话：把入口文件打包成一系列静态资源，供浏览器使用。
用途：
1.代码转换
2.文件优化：压缩合并
3.代码分割：公共模块分离合并，路由懒加载
4.自动刷新
5.代码校验
6.自动发布
练习流程：
--------------------------- 打包初体验 -------------------------
1. 新建文件夹，打开cmd命令行初始化：(出现package.json)
npm install -g yarn (如果之前全局安装过yarn则略过)
yarn init -y
2. 安装本地webpack: (出现node_modules, yarn.lock)
webpack webpack-cli -D
3. 新建src/index.js入口文件
console.log('hello webpack');
4. 运行webpack生成dist目录：(出现的dist/main.js是压缩优化后的代码，配置文件中设置mode = ‘development’后则不压缩)
npx webpack
5. 新建src/a.js, 写一些CommonJS(node)语法：
module.exports = 'Edward'
module.exports输出，然后在src/index.js通过require引入
此时这样是无法在我们浏览器中跑的，因为这是node 的规范
6. 在dist文件夹下,新建index.html,让它直接引用打包后的结果main.js
7. 在浏览器打开发现，通过webpack打包后生成的main.js中的代码可以在浏览器正常运行。
------------------------- 接下来配置webpack ------------------------
8. 新建webpack.config.js 配置文件(由于webpack是node写出来的，所以这个配置文件中要写node的语法)
9. 添加本地服务器：
yarn add webpack-dev-server -D
10.运行本地服务器：(同时可选择配置devServer)
npx webpack-dev-server
(或者在package.json中配置脚本：”dev”:”webpack-dev-server”,就可以通过 npm run dev 命令来运行服务)
但是问题来了，我们总不能每次打包完后，在出口文件夹下再手动创建html并引入js文件吧，所以我们要想办法让出口文件夹自动生成一个引入js文件的html文件
11.新建src/index.html 文件作为模板
12.添加html-webpack-plugin插件，下载模块后引入配置文件：
yarn add html-webpack-plugin -D
这样每次打包完成后，在dist出口文件夹下的html文件中都会把打包好的js文件自动引入。
-------------------------- 样式处理 ----------------
13.新建src/a.css
body {
color: 'green';
}
新建src/index.css,
@import './a.css';
body {
background: red;
}
并在src/index.js中通过 require(‘index.css’) 的方式引入,
let str = require('./a.js')
console.log(str)
require('./index.css')
运行后此时命令行报错：need an appropriate loader 需要一个合适的解析器
14.安装css-loader, style-loader, 分别负责： 解析@import这种语法，把css插入到header标签中
yarn add css-loader style-loader -D
yarn add less less-loader -D
15.在配置文件中添加module模块并适配规则：
用到一个loader时，use后为字符串；
用到多个loader时，use后为数组。Loader默认解析顺序为从右到左，loader还可以写成对象的方式，用来添加更多配置。
---------------- es6语法转换 ---------------
16.安装依赖后在配置文件中添加配置规则
yarn add babel-loader @babel/core @babel/preset-env -D
Yarn add @babel/plugin-proposal-class-properties -D
（未完待续。。。）
【附录】：
// 本配置文件名又可命名为webpackfile.js let path = require('path'); // webpack内置模块 let HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { devServer: { port: 8080, progress:true, contentBase: './dist1', }, mode: 'development', // 默认为 production entry: './src/index.js', output: { filename: 'bundle.js', // 打包后的文件名，默认为main.js path: path.resolve(__dirname,'dist1') // 路径必须是一个绝对路径 }, plugins:[ // plugins 是个数组，放着各种webpack插件的配置 new HtmlWebpackPlugin({ template: './src/index.html', // 以哪个文件作为模板 filename: 'index.html' // 打包后html文件的名字 }) ], module: { rules: [ { test: /.js$/, use: { loader: 'babel-loader', options: { // 用babel-loader 需要把es6转化为es5 presets: [ '@babel/preset-env' // 转换es6箭头函数等语法 ], plugins: [ '@babel/plugin-proposal-class-properties' // 转化es6的Class类 ] } } }, { // 处理css文件 test: /.css$/, use:[ { loader: 'style-loader', // 把css插入到header标签中 // options: { // insertAt: 'top' // } }, 'css-loader' // 解析@import这种语法 ] }, { // 处理less文件 test: /.less$/, use:[ { loader: 'style-loader', // 把css插入到header标签中 // options: { // insertAt: 'top' // } }, 'css-loader', // 解析@import这种语法 'less-loader' // 作用：less -> css ] } ] } }