1. webpack初识

1. 前言

一直以来，对webpack的了解都处于初级阶段，复杂的配置没配过，没有实际项目经验。面试问到只能回到用的脚手架。。。
前段时间找到了一个课程，这个相当于是课程的一个笔记吧

2. 什么是webpack

官网的描述：

本质上，webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个静态资源(bundle)。

转换成自己的话：

• webpack 是前端的一个资源构建工具，一个静态模块打包器；
• 在 webpack 看来，前端的所有资源文件(js/json/css/less/scss/img...)都是一个个模块；
• webpack 会根据资源的依赖关系生成一个依赖关系图，再打包成对应的静态资源bundle。

3. 核心概念

3.1. 讲概念前：webpack打包的大致流程

• 以入口Entry为起点，分析构建内部依赖图，找出有哪些模块和库是Entry直接和间接依赖的；
• 开始处理找到的每个依赖项：
  • webpack可以直接处理js, json文件；
  • webpack处理不了的文件(css, less, scss, png, jpg...)使用loader处理；
  • 使用plugins做优化、压缩等处理；
  • 处理完后输出到文件中，这些文件我们称为bundles；
• 处理完后获得了bundles，webpack会根据出口output的配置找到目标文件夹，创建目标文件，再把这些bundles写入目标文件。

3.2. 五大核心概念

入口 - Entry

入口(Entry)是 webpack 分析构建内部依赖图的起点模块(模块就是一个文件)。

// webpack.config.js:
module.exports = {
  entry: './path/to/my/entry/file.js'
};

出口 - Output

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。

// webpack.config.js:
const path = require('path');
module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    // 输出路径：
    //    --dirname: nodeJs的变量，代表当前文件的绝对路径
    //    resolve: nodeJs里path模块的方法，用来拼接绝对路径
    path: path.resolve(__dirname, 'dist'),
    // 输出文件名
    filename: 'my-first-webpack.bundle.js'
  }
};

Loader

• loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）；
• loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块。

loader的使用：

• 需要先下载；
• 无需requrie。

// webpack.config.js:
const { resolve } = require('path');
const config = {
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      // 不同类型的文件必须配置不同的规则来处理
      {
        test: /\.css$/, // 匹配什么样的文件
        // use数组中loader的执行顺序：从下到上，从右到左（后进先出）
        use: [
          'style-loader', 
          'css-loader' 
        ]
      }
    ]
  }
};
module.exports = config;

插件 - Plugins

插件(Plugins)可以用于执行范围更广(比loader)的任务。插件的范围包括：从打包优化和压缩，一直到重新定义环境中的变量等。。。

plugin的使用：

• 需要先下载；
• 还需requrie。

// webpack.config.js:
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
module.exports = config;

模式 - Mode

• 模式(Mode)指示 webpack 使用相应模式的配置；
• mode: 'development' | 'production';
• 生产环境和开发环境将ES6模块化编译成浏览其能识别的模块化；
• 生产环境比开发环境多一个压缩js代码；

// webpack.config.js:
module.exports = {
  mode: 'production'
};

4. 使用webpack

webpack真的要动手才能更深刻，跟着我一块打包一下吧~

我的webpack版本："webpack": "^5.44.0", "webpack-cli": "^4.7.2"；
(完整代码在这里, 是这两个文件夹：webpack初体验 和 webpack初体验2)

4.1. 不使用配置文件

如果不涉及loader, plugins的配置，可以直接使用命令行打包。

第一步：准备

需要安装 webpack 和 webpack-cli 。

npm i webpack webpack-cli -D

第二步：写代码

代码在这儿~

目录结构：

webpack初体验
├── src
│   └── index.js
│   └── test.json

代码：

// 1. src/index.js
import data from './test.json';
console.log(data);
function add(x, y) {
  return x + y;
}
add(1, 2)
console.log(add(1, 2))

// 2. src/test.json
{
  "testJson": "test json"
}

第三步：打包

项目根目录输入以下命令：

• 开发环境：
  • 命令：webpack ./src/index.js -o ./build_dev/ --mode=development；
  • 含义：webpack会以./src/index.js为入口文件开始打包，打包后输出到./build_dev/main.js，整体打包环境是开发环境。
• 生产环境：
  • 命令：webpack ./src/index.js -o ./build_prod/ --mode=production；
  • 含义：webpack会以./src/index.js为入口文件开始打包，打包后输出到./build_prod/main.js，整体打包环境是生产环境。

4.2. 使用配置文件

第一步：准备

• 与不使用配置文件一样，需要安装 webpack 和 webpack-cli；
• 还需要安装使用的 loader 和 plugins。

npm i webpack webpack-cli -D

// 下载loader和plugins
npm i xxx-loader xxx-plugin -D

第二步：写代码

需要在项目的根目录写一个名为webpack.config.js的配置文件。

目录结构：

webpack初体验2
├── src
│   └── index.js
│   └── test.json
├── webpack.config.js

代码：

// 1. src/index.js
import data from './test.json';
console.log(data);
function add(x, y) {
  return x + y;
}
add(1, 2)
console.log(add(1, 2))

// 2. src/test.json
{
  "testJson": "test json"
}

// 3. webpack.config.js
const { resolve } = require('path'); // 
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader' 
        ]
      }
    ]
  },
  plugins: [],
  mode: 'development'
}

第三步：打包

项目根目录中输入命令webpack即可。打包好后，控制台还会显示一些打包相关的信息，有兴趣的可以仔细瞅瞅。