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

一. 历史介绍

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