webpack核心概念

webpack核心概念

• 入口 entry
  • 指示webpack应该从哪个模块开始，加载整个项目
  • 默认是./src/index.js 但你可以通过在webpack.config.js中指定一个（或多个）不同的入口起点
• 出口 output
  • 就是webpack打包之后的文件，它所在的位置，命名
  • 默认值是 ./dist/main.js
  • 路径和文件名可以在webpack.config.js中配置
• loader
  • webpack只能理解javascript和json文件，loader让webpack能够去处理其他类型的文件
  • 例如识别css html img 等文件时， 需要css-loader html-loader
• 插件 plugin
  • loader用于解析，转换某些类型的模块，而插件则可以用于执行范围更广的任务，包裹打包优化，资源管理，注入环境变量
• 模式 mode
  • 就是用什么样的方式，来处理输出打包之后的文件
    • 1.development 开发模式，代码不会被压缩，开启代码调试
    • 2.production 发布模式，代码压缩，关闭代码调试
    • 3.none 简单的说，就是打个包
    • 主要用1，2

官方：https://webpack.docschina.org

依赖图

就是从入口文件开始，根据他们之间的关系

形成的一个二叉或多叉的树状图，

index

\_a

\_a1

webpack 就是可以从入口文件index开始，一层一层的把所有模块都找到

初始化目录，目录名不能有中文

• npm init -y
• 安装webpack
• npm install -D webpack webpack-cli
• 现在最新的webpack版本是5
• 所以默认安装的就是webpack 5

入口文件

• src/index.js
• 第一次webpack打包
• webpack ./src/index.js -o ./dist --mode=development

webpack配置文件

配置文件命名是固定的

webpack.config.js

• model 打包模式
  • production 生产模式
  • development 开发模式
• entry 入口文件
• output 出口
  • path 输出目录 必须是绝对路径
  • filename 输出文件名
• path.resolve(); 解析为绝对路径
• __dirname 总是指向被执行js文件的绝对路径