1.模块回顾
模块化为了解决什么？
主要是为了解决变量污染的问题，以及便于维护，以及重用
什么是模块？模块化？
模块：拥有独立功能的部分
模块化：将系统分离成多个独立功能部分的 方法
模块化规范
CommonJS规范 （同步模块规范）
- 每个文件就是一个独立的模块，其内部所有变量私有化，对外不可见
- 使用module.exports进行内部资源暴露
var name = '张三'
module.exports.name = name- 使用require进行模块加载
require('./模块路径')
每次require就是require一个模块的exports对象
- require('axios') 不写./ 加载的就是node_modules的核心模块（先找项目内的，在找全局的）
- require('./xxx') 如果./ 打头，则表示加载相对路径
同步模块化规范，适用于服务器端，不适用于浏览器端（因为浏览器都是异步加载）
- 实现者：nodeJS
AMD (异步模块规范)
- 使用define定义模块(function内的就是一个独立的模块)
define(function(){
//模块内容
var name = '张三'
})
- 使用return，来进行暴露
define(function(){
//模块内容
var name = '张三'
var age = 20
return {
name,
age
} //使用return来暴露
})
- 使用require来引入模块
- 实现者：requireJS
CMD (异步通用模块规范)
- 使用define函数来定义模块
- 使用module.exports进行模块暴露
- 使用require来引入模块
- 实现者：seaJS
经典面试题
请简述AMD CMD COMMONJS的区别？
- COMMONJS是同步，适用于服务器端
- AMD CMD是异步，适用于浏览器端
- AMD依赖前置，CMD依赖就近
ES6模块化规范
- 一个文件就是一个独立的模块
- 暴露
export xxx- 引入
import xxx from '路径'
//ES6写法
两种暴露方式
- 方式一：直接在变量或者函数前面增加export
- 方式二：使用export default 统一暴露
方式一
export var name = '张三'
export function sayHi(){
console.log(name)
}
//加载，加载方式一需要使用解构（只能使用结构进行加载）
//b.js 加载a
import { name, sayHi } from './a.js'
方式二
var name = '张三'
function sayHi(){
console.log(name)
}
export default {
name,
sayHi
}
//加载，加载是直接加载default后面的对象，所以无需结构
import aaa from './a.js'
aaa.name
aaa.sayHi()
2.Webpack 介绍
3.Webpack 安装
1. 全局安装webpack命令行工具
yarn global add [email protected]
2. 在项目内局部安装webpack依赖
yarn add [email protected]
3. 书写webpack.config.js配置文件
var path = require('path')
module.exports = {
//入口JS文件
entry: './src/a',
//出口
output: {
//输出绝对路径
path: path.resolve(__dirname,"dist/"),
//输出文件名
filename: 'bundle.js'
}
}
//打包文件
//直接使用webpack命令进行打包！
4. 如果要开启观察者
module.exports = {
...
//观察者(检测文件变化，进行自动打包)
watch: true
}
4.Webpack入门
webpack
5.Webpack配置文件
var path= require('path');
var webpack = require('webpack'); //要使用插件，请记住一定引入webpack模块
/* webpack配置对象 */
module.exports = {
//入口文件
// entry: "./src/a", //单入口，一个字符串地址 (单入单出)
// entry: ["./src/a.js", "./src/c.js"], //多入口，一个数组 （多入单出）
entry: {
// key输出的文件名: value要打包的入口文件
aa: "./src/a.js",
cc: "./src/c.js"
}, //多入多出
//配置输出
output:{
//输出的路径（硬盘路径） 使用webpack就是读取此path
path:path.resolve(__dirname,"dist/"), // 目录，V2.0+
//输出的文件名
filename:"[name].js", //[name]是webpack自己的变量！！可以解析多入口的key
//配置服务器输出的虚拟路径（输出到内存里的路径） 使用webpack-dev-server就是读取此path
publicPath: "/dist/",
//异步模块自定义名称属性
chunkFilename: "[name].js"
},
//loaders配置
module: {
//加载器规则配置
rules: [
//加载器对象
//css加载器
{
test: /\.css$/, //匹配规则，正则表达式
use: ['style-loader', 'css-loader'] //使用哪种加载器加载
//use数组内执行顺序是从右到左
},
//less加载器
{
test: /\.less$/,
use: [{
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
//图片加载器
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192 //大小限制8k，如果大于此限制，会自动转化为file-loader
}
}
]
}
]
},
//所有插件配置的地方
plugins: [
// new webpack.BannerPlugin("作者：0927"), //添加注释
// //压缩插件
// new webpack.optimize.UglifyJsPlugin({
// //去掉所有注释
// comments:false,
// //抑制警告
// compress:{
// warnings:false
// }
// }),
// 提取公共模块到单独的文件(参数就是公共模块的文件名)
// new webpack.optimize.CommonsChunkPlugin('common')
]
//观察者(检测文件变化，进行自动打包)
// watch: true
}
webpack可以对文件进行模块化打包，可以单入单出，多入单出，还可以多入多出
单入单出：
entry: './src/a' //一个字符串的单入口
output: {
path: xxx
publicPath: xxx
filename: 'bundle.js' //单出口
}
多入单出：
entry: ['./src/a', './src/c'] //数组控制多个入口
output: {
path: xxx
publicPath: xxx
filename: 'bundle.js' //单出口
}
多入多出（注意需要修改出口）：
entry: {
key(输出模块的名字): value(入口文件路径)
abundle: './src/a',
cbundle: './src/c',
.....
}
output: {
path: xxx
publicPath: xxx
filename: '[name].js' //[name]是webpack的变量，会自动获取多入口的key作为文件名
}
6.Loader模块加载器
使用步骤
1. 确定我要加载的模块类型，到官网寻找对应的loader
(比如，要加载CSS或者加载图片)
https://www.webpackjs.com/loaders/
2. 下载安装对应loader
yarn add css-loader style-loader -D
3. 配置loader的规则
所有的loader都配置在webpack.config.js里
module.exports = {
...
module: {
rules: [
{
//具体的加载规则,
test: 匹配的规则,正则表达式
use: 使用哪种类型的加载器，顺序从右到左
},
{
test: /\.less$/
use: ['style-loader','css-loader','less-loader']
},
]
}
}
图片加载的加载器有两个
- url-loader：会直接把图片打包进JS模块内，适用于小图片（limit配置大小）
- file-loader：会把图片单独打包到输出文件夹内
当配置了url-loader,图片大于8kb时，会自动使用file-loader,但是不需要再配置，只需要下载即可
7.Webpack-dev-server(服务器)
1.全局安装
yarn global add [email protected]
2.本地安装
yarn add [email protected]