文章目录
webpack介绍
基于nodejs的一个打包的工具
vue中: npm run serve / npm run build ---- webpack
作用
- 优化：工程化、vue cli、react cli
- 打包： 将多个文件进行压缩，打包成一个文件 ---- 带宽
- 转换：es6，ts，jsx,tsx,less,sass,stylus
webpack结构
1.入口：entry ---- vue src/main.js
2.出口：output ---- vue dist
3.插件：plugins ---- vue public/index.html -> dist/index.html
4.devServer: 开发者服务器配置 - vue vue.config.js
5.转换： loaders ---- vue es6语法、sass文件转换成为浏览器可以解析的文件
6.module
7.mode: 模式 ----》 开发环境 生成环境
mode:
开发环境（development）: 你写的代码环境
生产环境（production）:打包后要上传到服务器的环境
webpack的配置
版本
webpack - 4.X ------- 免配置但可配置
webpack - 4.X以下版本 ------- 必须配置
0配置
不需要额外的配置 -》 默认的配置项
默认的入口就是 当前项目根目录下的 src 文件夹下的 index.js文件
默认的出口就是 dist 目录下打包的 main.js
安装模块
webpack: webpack核心模块
webpack-cli: 执行webpack的相关命令行
cnpm i webpack webpack-cli -g
查看webpack版本，测试是否安装成功
webpack -v
案例1 - demo1
将src文件夹下的 index.js文件 通过 webpack 指令打包至dist/main.js
-
疑问1：入口代码简单，出口代码复杂，为什么说还是优化了呢？
-
疑问2：打包时报了警告信息，如下图所示
解决疑问2
运行指令1： - 未压缩
webpack --mode development
运行指令2: - 压缩
webpack --mode production
解决疑问1：如果你的模块化、组件化开发呢？
当书写的代码简单时不需要打包工具
案例2：demo2
- 疑问： 能不能打包多个入口？ ==== 将多个文件打包成一个
案例3：demo3 ---- 多入口
- 疑问：不管是单入口还是多入口 ，打包的文件名字都叫做 dist/main.js，能不能改个名字名字呢？比如说 打包至 build/bundle.js
demo01
demo02
demo03
- 疑问：使用webpack是为了操作方便，但是现在每次运行的指令都很麻烦
案例4： demo4
npm init -y ----- 生成package.json的基本配置文件
scripts 选项中添加webpack的打包指令
配置使用webpack
案例5：demo5
创建webpack.config.js的配置文件，
只需要在命令行里运行 webpack 指令即可
运行webpack指令时，该命令一定需要与webpack.config.js同级别
- 疑问：webpack的配置文件一定得必须是 webpack.config.js文件吗？
案例6：demo6
webpack --config zywoo.config.js
虽然可以更改 配置文件名称，但是一般不建议修改
- 疑问：配置文件中的入口，如果出现多入口怎么办
案例7：demo7 - 多入口单出门 - 数组
- 疑问：如果是多入口多出口呢？
案例8： demo8- 多入口多出口 - 对象
- 疑问：如果写一个通用形式的入口以及出口，适用于所有场合
案例9：demo9 – 通用形式的写法
- 疑问： 如果想要在打包时，先清空所有的内容，然后再打包呢？
案例10：demo10 – 打包前先清空 防止缓存
通过配置webpack的插件实现
cnpm i clean-webpack-plugin -D
案例11： demo11 – 打包携带页面
通过配置webpack的插件实现
cnpm i html-webpack-plugin clean-webpack-plugin -D
直接webpack会报错需要安装 cnpm i webpack webpack-cli -D
- 默认会在dist目录下生成 index.html页面，如果想要换名字（一般不设置，采用的就是默认的名字）
- 假设页面中有缓存的信息，清除缓存（有必要设置）
- 如果想要屏蔽自动引入js或者修改js引入的位置
- 如果项目中是多入口多出口时，需要自动引入导出的js文件，并且如果需要设定导入的顺序
- 模拟vue项目，添加动态的标题时
- 如果想要清除注释语句、想要清除双引号、代码折叠去除空格、移除空标签
