简述 webpack核心

这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战」。

一. 什么是 webpack

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

简单的来说,WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

二. 构建一个 webpack 打包

1. 创建文件目录

创建目录和文件如下:

hello.js:

export const sayHello = function (name) {
  return `hello, ${name}`
}

提供一个方法，用来在 hello后面拼接传入的参数并且返回

index.js:

import { sayHello } from "./hello";

sayHello('ouda')

引入 sayHello，并且调用

2.执行命令

yarn init -y

yarn add webpack webpack-cli

3. 创建配置文件

在根目录下创建文件 webpack.config.js

在 webpack.config.js配置打包入口:

module.exports = {
  entry: './src/index.js'
}

4.执行打包命令

在根目录下执行:

npx webpack

5.打包结果

以上完成了一个最简单的 webpack 的打包，在根目录下生成了一个 dist文件夹，dist文件夹下有一个 main.js,如图为 main.js的全部内容。

webpack 的核心概念

1.entry

入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

注：如果不做配置的话默认为: ./src/index.js

2.output

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。

即输出路径，当前我们的输出路径是 ./dist/main.js,这也是 webpack的默认配置输出地址。

和entry不同的是 output是一个对象，不是单纯的输出地址字符串。

修改 output:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
}

这样会在 dist文件夹下生成输出bundle.js作为打包输出的 js

3. loader

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

添加 loader 读取 txt 文件：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      { test: /\.text$/, use: 'raw-loader' } // 使用 raw-loader 解析 txt
    ],
  }
}

创建一个 txt 文件，在 index.js 中调用

index.js:

import helloTxt from './hello.txt'
console.log(helloTxt)

这样打包就可以实现对 txt 文件格式的解析。

更多关于 loader 的深入使用。

4. plugin

plugin 即喜闻乐见的插件功能。

那么如何使用 plugin 呢？首先官方给出的插件概念：

webpack 插件是一个具有 apply 方法的 JavaScript 对象。apply 方法会被 webpack compiler 调用，并且在整个编译生命周期都可以访问 compiler 对象。

插件的配置方式：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 访问内置的插件
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

[每日一答]：简述webpack的核心