webpack
学webpack就靠记忆、英文(报错都是英文的,挂就挂在一报错就懵圈) 报错了就多翻译,多报几次就会了 未来的Vue或者React都的用它
模块化开发:
不管下面3个有多大区别,核心点:就是他们如何做到的模块化方式。
简单点:如何导出,如何引入。
CommonJS node就遵循这套规范
module.exports 导出
require() 引入
CommonJS规定,每一个JS都是单独的模块(模块是私有的:里面涉及的值、变量以及函数等都是私有的,和其它JS文件中的内容不冲突)
特点:
1. 所有代码都运行在模块作用域,不会污染全局作用域(每一个模块都是私有的,包括里面所有的东西都是私有的)
2. 模块可以多次加载,但是只会在第一次加载时运行一次,因为第一次加载的时候缓存了。如果想多次调用,必须清理缓存。(为了保证性能,减少模块代码重复执行的次数)
3. 模块加载顺序时按照其在代码中出现的顺序。CommonJS是同步操作
AMD require.js
Asynchronous Module Definition,即异步模块加载机制
CMD sea.js
CMD(Common Module Definition)表示通用模块定义
ES6模块化
import {fn} from './xx.js'; 引入模块
//xx.js
export function fn(){} 导出模块
// 写法一 export var m = 1
// 写法二 var m = 1; export {m}
// 写法三 var n = 1; export {n as m};
export function fn( ){ } 导出模块
/***************************************下面正是进入 webpack******************* 2018-12-25********************/
webpack可以看做是模块打包机,它做的事情是分析你的项目结构。
找到js模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等)。
并将打包为适合的格式以供浏览器使用。
1.代码转换:ts编译成js,把scss编译为css
2.文件优化:压缩js,css,html代码,压缩合并图片等
3.代码分割:提取多个页面的公关代码,提取首屏不需要的执行部分的代码让其异步加载
4.模块合并:在采用模块化的项目了会有很多个模块和文件,需要构建功能把功能模块分类合并成一个文件
5.自动刷新:监听本地源代码的变化。自动重新构建刷新浏览器
快速上手:
1.初始化项目(取名字的时候一定不要取工具的名字) npm init -y
2.安装webpack:(npm i webpack webpack-cli -D)
在全局安装:
npm i webpack -g 不建议。
建议在本地安装:
npm install webpack -save-dev
npm i webpack-cli -D
简写:npm i webpack -D
开发依赖:有些配置开发的时候使用,到了线上就不使用了
项目依赖:打包后上线需要的依赖 npm i xx -S
3.手动创建 webpack.config.js 文件
4.入口、出口、模块、插件
在package.json文件里"scripts"对象里写入"build":"webpack"。
npm run build (build,是自己起的要创建的文件夹的名字