webpack4入门到进阶

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

初始化项目

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

常见loader

配置文件 webpack.config.js

jsCopy
module.exports = {
  //开发or生产
  mode: '.....',

  //定义入口
  entry: '.....',

  //输出配置
  output: {},

  //各种loader
  module: {},

  //如何生成 Source Map
  devtool: '......',

  //别名设置
  resolve: {},

  //插件（数组）
  plugins: [],

  //配置优化
  optimization: {},

  //排除打包时的依赖项
  externals: {},

  //开发服务器
  devServer: {},
  //代码切割
  splitChunks: {},

  //运行时的配置
  runtimeChunk: {},
};

entry

打包文件的起点入口
入口可分为多入口和单入口

jsCopy
//单入口
module.exports = {
  entry: `./index.js`,
}
//多入口
module.exports = {
  entry: { 
    "index": `./index.js`,
  },
}

output

用来指定打包后的文件名字和路径以及打包格式

loader

loader就是翻译官，把文件翻译给webpack认识

插件

增强webpack功能

开发服务器配置

代码切割配置

webpack优化

构建速度优化

主要思路
减少要处理的文件
缩小要查找的范围

• hard-loader 缓存
• 多线程编译
• webpack4
• 使用别名
• 配置后缀

打包体积优化

• cdn+externals
• 按需加载
• 分离大包
• 动态加载

附录

• https://juejin.cn/post/6844904036936712200