vue.js及项目实战[笔记]— 05 WebPack

2024-08-24 21:03:31

一. 历史介绍

1. 规范

AMD
Commonjs||CMD
UMD

参考：
认识AMD、CMD、UMD、CommonJS

2. 工具

npm
bower
webpack
browserify

参考：
bower 和 npm 的区别详细介绍
 npm、cnpm、bower安装区别
 gulp/grunt和browserify/webpack的区别

二. webpack打包模块源码

1. 把所有模块的代码放入到函数中，用一个数组保存起来
2. 根据require时传入的数组索引，能知道需要那一段代码
3. 从数组中，根据索引取出包含我们代码的函数
4. 执行该函数，传入一个对象module.exports = 'xxx'
5. 我们的代码，按照约定，正好是用module.exports = 'xxx'进行赋值
6. 调用函数结束后，module.exports从原来的空对象，就有了值
7. 最终return module.exports作为require函数的返回值

三. webpack.config.js文件配置

entry 是一个对象，程序的入口
- key: 随意写
- value: 入口文件
output 是一个对象，产出的资源
- key: filename
- value: 生成的build.js
module 模块（对象）
- loaders: []
  - 存在一些loader | {test:正则,loader:'style-loader!css-loader'}

四. 处理less

loader:'style-loader!css-loader!less-loader'

五. 处理ES6

babel-loader+babel-preset-env(es2015/2016/2017)

六. 处理文件+base64

url-loader 可以将文件生成为base64编码到build.js中
文件在base64加密后会比原来大三分之一
应用场景是比较小的图片，4kb以内的图片

七. 字符串内使用内置变量

name:[name].[ext]
name是获取原文件名，ext是获取原文件名的后缀
output:{path:'绝对路径',设置产出的资源目录,filename:'build.js'}

八. 处理html

html-webpack-plugin

1.下载
2.在webpack.config.js文件中引入
3.plugins属性，配置该对象
4.给其options设置template（参照物）

九. 单文件方式

依赖 vue-loader
vue-template-compiler

十. webpack-dev-server

--open 自动打开浏览器
--hot 热替换，不在刷新的情况下替换，css样式
--inline 自动刷新
--port 9999 制定端口
--process 显示编译进度

四. 包的分类管理和分类恢复

1. 安装包的时候，做一个分类管理
- 开发依赖（打包相关webpack） npm i 包名 -D ->devDependencies
- 生产依赖（不包含webpack打包依赖）npm i 包名 -D -> dependencies
2. 恢复依赖
- 如果包文件不小心删了/少了
- 开发恢复 npm i
- 生产恢复 npm i --production

最新文章

热门文章