Webpack综述-优快云博客

本文详细介绍了Webpack的基本原理和核心概念，包括入口、输出、Loader和插件的使用方法，帮助初学者快速掌握Webpack的配置和操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WebPack是一个现代Js应用的静态模块打包器，使用Webpack处理应用时，它会递归地构建一个依赖关系图，其中包含了应用所需的各个模块，并将这些模块打包为一个或多个bundle。
Webpack有四个核心概念

入口（Entry）
输出（Output）
Loader
插件（Plugins）

入口

它负责指示Webpack使用哪个模块作为构建内部依赖图的起始点，进入起点后，Webpack会找出起点所依赖的模块和库，Webpack中有多种方式来定义起点，例如：

//单个入口（简化）
const config = {
  entry: "./src/main.js"
}

//对象语法
const config = {
  app: "./src/main.js",
  vendors: "./src/vendors.js"
}

输出

output指示webpack在哪里输出它创建的bundle以及如何命名它们，例如：

const config = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  }
}

loader

loader使得webpack可以处理非js文件（webpack本身只理解js），loader可以将所有文件转换为webpack能够处理的模块，例如在开发时使用ES6，再通过loader转换为ES5，如下配置：

const config = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "babel-loader",
          options: [
            presets: ["env"]
          ]
      }
    ]
  }
}

插件

插件的功能则更为强大，可以做包括打包优化、压缩、定义环境变量等事宜，插件配置只需要使用require()，然后再添加到plugins数组中即可，如下所示

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