一.为什么使用webpack
项目为了维护性，进行模块设计，webpack帮助管理模块，是代码管理工具，vue，react，angle，使用webpack作为实现底层代码的工具，支持懒加载，代码分割等,webpack4速度更快，节约构件时间
二. webpack简析
原始方式面向对象不足
html需要加载多个js文件，发送多个http请求，加载速度慢，
不直观，查看需打开查看
不容易查错，代码不容易维护，例如依赖加载错误顺序
ES Moudle模块引入方式
原生浏览器不识别，需要借助webpack翻译，浏览器才能正确识别
import Header from "./header.js"
改变引入方式，在js文件import导入每个模块，解决加载慢，依赖关系非常明确，目录结构比较清晰，依赖不会出现顺序错误
webpack 如何安装使用
-
导入导出
安装了node.js,和包管理工具 npm init初始化配置文件，package.json npm i webpack -cli --save-dev 安装cli时自动安装webpack 通过webpack -v查看版本 npx webpack index.js 用webpack 翻译js文件 文件夹生成dist目录，里面存储翻译好的文件 模块需要引入导出 export default 模块名 -
webpack核心定义时模块打包工具
node里使用CommonJS模块 -- webpack打包也能识别
引入模块 var header= require("./header.js") 导出模块 module.exports = HeaderCMD AMD 最早是js模块打包工具 -- require js文件 现在可以打包任何文件 var style = require("./index.css") import style from "./index.css" -
文档的使用 -- webpack.js.org
- condiguration 概念 --Modules介绍了模块化的概念
- API --MODULES moudles常用方法和变量
三.webpack安装环境
用的node.js，10.13.0版本比较稳定，新版本node.js提高webpack的打包速度
webpack打包速度影响的两个点：node.js的版本和webpack的版本尽量的新，也要保持稳定
两个都能打印安装就没有问题，npm 是以node的规范创建项目
npm init 生成package.json，描述包的信息，配置的内容 "private":true,是否发布
安装webpack
> 全局安装 npm i webpack -cli -g 安装不成功使用手机WiFi热点 不建议使用
> 全局安装的webpack，两个项目不同版本创建，安居安装得到版本为4时无法运行3的项目，解决问题需要删除重新安装运行，才能启动，如果两个项目有依赖，想同时启动，没有办法实现
> 卸载webpack npm uninstall webpack webpack-cli -g
> 局部安装webpack 在文件内 npm i webpack webpack-cli -D/-dev
> 局部运行webpack npx webpack -v
> 优点：创建不同版本项目，不会影响到另外一个webpack的运行
四.webpack的配置
通过配置文件，进行打包的设置，webpack.config.js，需要根据工程的复制程度进行对配置内容的编写
const path = require("path")
module.exports ={
entry:"index.js" //打包入口
output:{ //打包出口
filename:"bundle.js", //生成文件名
path:path.resolve(_dirname,"bundle") //绝对路径打包位置
},
mode:"production" //打包格式 打包的文件会被压缩 可选：development 不压缩代码一样执行
}
五.对代码进行打包
//npx webpack 对代码进行打包
在package.json进行配置
"scipts":{
"bundle":"webpack" //先到工程命令的webpack中查找
}
//npm run bundle 对代码进行打包
打包提示：
hash：对应的唯一id值
version：webpack版本
time：时间 builta at：日期
asset ：打包的文字 size：大小 chunks：打包文件的id
chunk names：文字的name 是config配置entry的main的简写
enterypoint main ：打包入口
