webpack可以做的事情:
代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布
需要提前掌握的内容:
- node基础、以及npm使用
- 掌握es6语法
最终掌握的webpack技能:
- 常见配置
- 高级配置
- 优化策略
- ast抽象树
- webpack中的tapable
- 掌握webpack流程,手写webpack
- 手写常见的loader
- 手写常见的plugin
webpack安装:
1、安装本地的webpack
2、安装webpack-cli
webpack可以进行0配置
-打包工具 --> 输出后的结果(js模块)
手动配置webpack
创建webpack.config.js
webpack是node写出来的,所以要遵循node的语法
module.exports = {}
// 修改默认配置目录
npx webpack -config webpack.config.my.js
开发服务器的配置:
安装webpack-dev-server并启动
yarn add webpack-dev-server -D
npx webpack-dev-serve
module.exports = {
devServer: { // 开发服务器的配置
port: 3000,
progress: true,
contentBase: './build',
compress: true,
},
}