webpack4入门到进阶

    0

在查看众多开源项目后,发现大多数具有html的页面都使用webpack打包,而纯js或者工具包类的都使用rollupjs打包

初始化项目

安装webpack yarn add webpack webpack-cli --dev

常见loader

配置文件 webpack.config.js

js
module.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
  • 按需加载
  • 分离大包
  • 动态加载

附录

评论区

共有评论 0

暂无评论