1. webpack初识

发布于 2022年 01月 17日 20:07

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代码;
选项描述特点
development会将DefinePluginprocess.env.NODE_ENV的值设置为development。启用NamedChunksPluginNamedModulesPlugin能让代码本地调试运行的环境
production会将DefinePluginprocess.env.NODE_ENV的值设置为production。启用FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin能让代码优化上线运行的环境
// 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即可。打包好后,控制台还会显示一些打包相关的信息,有兴趣的可以仔细瞅瞅。

推荐文章