在查看众多开源项目后,发现大多数具有html的页面都使用webpack打包,而纯js或者工具包类的都使用rollupjs打包
初始化项目
安装webpack
yarn add webpack webpack-cli --dev
常见loader
配置文件
webpack.config.js
jsmodule.exports = { //开发or生产 mode: '.....', //定义入口 entry: '.....', //输出配置 output: {}, //各种loader module: {}, //如何生成 Source Map devtool: '......', //别名设置 resolve: {}, //插件(数组) plugins: [], //配置优化 optimization: {}, //排除打包时的依赖项 externals: {}, //开发服务器 devServer: {}, //代码切割 splitChunks: {}, //运行时的配置 runtimeChunk: {}, };
entry
打包文件的起点入口
入口可分为多入口和单入口
js//单入口 module.exports = { entry: `./index.js`, } //多入口 module.exports = { entry: { "index": `./index.js`, }, }
output
用来指定打包后的文件名字和路径以及打包格式
loader
loader就是翻译官,把文件翻译给webpack认识
插件
增强webpack功能
开发服务器配置
代码切割配置
webpack优化
构建速度优化
主要思路
减少要处理的文件
缩小要查找的范围
- hard-loader 缓存
- 多线程编译
- webpack4
- 使用别名
- 配置后缀
打包体积优化
- cdn+externals
- 按需加载
- 分离大包
- 动态加载
附录