url:C:\Users\27509\Desktop\kaikeba\demo_webpack
工具:
1.编译类-babel
es6->es5
2.打包-browserify
一堆文件->单个文件
3.开发辅助-browser-sync
多端同步
4.测试类
单元测试:模块,函数
集成测试
压力测试:性能,负载能力,隐藏bug
webpack+插件
打包,编译,测试,调试
编写配置
默认:webpack.config.js
修改:
es6模块化
export default xxx //作为模块本身被输出 import xxx from "..."
export let a=1,b=2 //输出模块的东西 import {a,b} from "..."
webpack基本配置
module.exports={
extry:"文件名",
output:{
path:"结果目录",
filename:"结果文件名"
}
}
单入口
entry:"入口文件地址"
多入口
entry:{
名字:"入口文件地址",
...
}
output:{
path:xxx,
filename:"...[name]..."
}
dev-server
1.安装
cnpm i webpack webpack-cli webpack-dev-server -D
webpack-cli 命令行工具
npm i -g webpack
webpack 库
npm i webpack
devserver
开发服务器
loader-翻译
babel-loader
1.babel-loader 给webpack用的
1.babel-core babel核心库
1.babel-preset-env 环境预设
cnpm i babel-loader babel-core babel-parset-env -D
百分之90的loader
module:{
rules:[
{
test:正则,
use:loader
}
]
}
1.打包-》配置
2.devserver
3.各种loader
resolve:{//一般只认js 如果需要其他的可以添加其他语言后缀
extensions:[".ts",".tsx"]
}