Webpack自学之webpack基础（一）—— Webpack 5.0 环境下的资源打包

本文链接：https://blog.csdn.net/canishan/article/details/121808811

webpack基础

webpack简介：

webpack是什么？

本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。

作用：用于分析并打包代码，支持所有类型文件的打包，且能够压缩代码，提高加载速度。
webpack核心概念：

entry : 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph) 的开始。

output : 指示webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。

loader : 让 webpack 能够去处理其他类型（非 JavaScript 和 JSON 文件）的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

plugins : 可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

mode : 指示使用相应模式配置 development 和 production，可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

webpack基本用法：

入口文件：webpack 入口文件为 index.js
运行命令 :

2.1 初始化：npm init 或 yarn init

2.2 安装依赖包：
- 全局安装：npm i webpack webpack-cli -g 或 yarn add webpack webpack-cli -g
- 本地安装：npm i webpack webpack-cli -D 或 yarn add webpack webpack-cli -D
2.3 编译打包命令 （无配置文件时） ：
- 开发环境： webpack ./src/index.js -o ./build/built.js --mode=development （webpack 会以 ./src/index.js 为入口文件开始打包 , 打包后输出到 ./build/built.js 整体打包环境为开发环境）
- 生产环境：webpack ./src/index.js -o ./build/built.js --mode=production （webpack 会以 ./src/index.js 为入口文件开始打包 , 打包后输出到 ./build/built.js 整体打包环境为生产环境）
2.4 运行打包输出的文件：node .\build\built.js\main.js

2.5 打包文件用于网页上：借助 index.html 文件，引入打包后的 main.js 文件，即可在网页上运行。

2.6 配置 scripts （自定义命令）：
- 此时运行命令改为 yarn build 或 npm run build
```
"scripts": {
    "build": "webpack"
}
```
可直接处理文件格式：

3.1 webpack 能直接处理 js/json 资源 ;

3.2 webpack 不能直接处理 css/img 等其他资源 ;
环境异同：

4.1 生产环境和开发环境将 ES6 模块化编译成浏览器能识别的模块化 ;

4.2 生产环境比开发环境多一个压缩 js 代码。
编译打包执行流程图：

webpack配置：

配置文件：webpack 的默认配置文件为 webpack.config.js
规范：构建工具都是基于 nodejs 平台运行的 , 模块化采用 commonjs

基本配置：

// resolve 用来拼接绝对路径 
// path - nodejs 内置路径模块
const { resolve } = require('path')

// commonjs 导出规则 module.exports
module.exports = {
  // webpack 配置
  // 入口文件
  entry: './src/index.js',
  // 输出
  output: {
    // 输出文件名
    filename:'built.js',
    // 输出路径
    // __dirname - nodejs 的变量, 代表当前文件的目录绝对路径
    path: resolve(__dirname,'build')
  },
  // loader 的配置
  module: {
    rules: [
      // 详细 loader 的配置
    ]
  },
  // plugins 的配置
  plugins: [
    {
       // 详细 plugins 的配置
    }
  ],
  // 模式
  mode: 'development', // 开发模式
  // mode: 'production' // 生产模式
}

loader 的基础使用：

下载
loader 的详细配置：

2.1 test 定义文件格式 ;

2.2 use 数组里面添加 loader 名

 module: {
    rules: [
      // 详细 loader 的配置
      {
        // test - 匹配的文件格式
        test: /正则表达式/, // 例如: /.文件类型$/
        // use - 使用的 loader
        use: [ // loader 名的数组, 例如: "xxx-loader", "xxxx-loader"
          // use 数组中 loader 执行顺序: 从右到左, 从下到上依次执行
        ]
    ]
  },

>>> 注意: rules 里面每个对象是独立的, 不可复用, 若两个独立的对象需要使用相同的 loader, 必须多次书写