Webpack基础教程之名词解释

更新时间：2020年02月03日 14:40:38 作者：pingan8787

webpack 是一个现代JavaScript 应用程序的静态模块打包器，这次为大家简单介绍一下webpack及关于webpack的一些专属名词入口(entry)，输出(output)，loader，插件(plugins)

一、概念介绍

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

它是高度可配置的，但是，在开始前你需要先理解四个核心概念：

入口(entry)

输出(output)

loader

插件(plugins)

1、入口(entry)

指定webpack从哪个模块开始构建项目，通过一下配置指定一个入口起点(或多个入口起点)，被处理到称之为 bundles 的文件中：

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

2、出口(output)

处理打包生成的 bundles 文件，如指定输出文件位置，文件名等。

// webpack.config.js
module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'test_name.bunlde.js'
  }
}

3、loader

loader 作用是将所有文件类型转换成webpack能处理的有效模块，然后就可以通过webpack将文件打包。

本质上，webpack loader将所有类型文件转换成应用程序的依赖图可以直接引用的模块。

特殊: 只有webpack支持 import 导入任何类型模块，如 .css,.vue 等文件。

webpack 配置 loader的两个目标：

1.识别需要对应 loader 处理的文件。(使用test属性)

2.转换文件使其能够添加到依赖图并最终添加到 bunlde 中。(使用use属性)

// webpack.config.js
const path = require('path');
const config = {
 entry: './path/to/my/entry/file.js',
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'my-first-webpack.bundle.js'
 },
 module: {
  rules: [
   { test: /\.txt$/, use: 'raw-loader' } 
   // test/use 两个属性是必须的
  ]
 }
}
module.exports = config;

4、插件(plugins)

使用插件可以执行范围更广的任务。通过 require() 引用后添加在 plugins 数组中。

另外如果需要多次使用同一个插件，则使用 new 操作符来创建它的一个实例。

安装html-webpack-plugin：

npm install html-webpack-plugin --save-dev
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用于访问内置插件
const path = require('path');
const config = {
 entry: './path/to/my/entry/file.js',
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'my-first-webpack.bundle.js'
 },
 module: {
  rules: [
   { test: /\.txt$/, use: 'raw-loader' }
  ]
 },
 plugins: [
  new webpack.optimize.UglifyJsPlugin(),
  new HtmlWebpackPlugin({template: './src/index.html'})
 ]
};
module.exports = config;

二、入口起点(Entry Points)

webpack的 entry 属性不仅可以配置单个入口，还可以配置多个入口：

1、单个入口(简写)配置

用法：entry: string|Array<string>

简单使用：

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

entry 属性的单个入口配置方式：

const config = {
  entry:{
    main:'./path/to/my/entry/file.js'
  }
}

若向 entry 传入 [文件路径(file path)数组]，将创建多个主入口，常常用在需要同时注入多个文件，并将它们的依赖导向(graph)到一个chunk时。

2、多个入口(简写)配置

对象语法

用法：entry: {[entryChunkName: string]: string|Array<string>}

// webpack.config.js
webpack.config.js
const config = {
 entry: {
  app: './src/app.js',
  vendors: './src/vendors.js'
 }
};

虽然语法繁琐，但这是应用程序中定义入口的最可扩展的方式。

“可扩展的 webpack 配置”是指，可重用并且可以与其他配置组合使用。这是一种流行的技术，用于将关注点(concern)从环境(environment)、构建目标(build target)、运行时(runtime)中分离。然后使用专门的工具（如 webpack-merge）将它们合并。

常见场景

列出一些常见的入口配置和实际案例：

(1)分离应用程序(app) 和第三方库(vendor) 入口

// webpack.config.js
const config = {
 entry: {
  app: './src/app.js',
  vendors: './src/vendors.js'
 }
};

webpack 从 app.js 和 vendors.js 开始构建，并且他们是完全分离互相独立，为了支持提供更佳 vendor 分离能力的 DllPlugin，考虑移除该场景。

(2)多页面应用程序

// webpack.config.js
const config = {
 entry: {
  pageOne: './src/pageOne/index.js',
  pageTwo: './src/pageTwo/index.js',
  pageThree: './src/pageThree/index.js'
 }
};

这样告诉 webpack 需要 3 个独立分离的依赖图，

使用 CommonsChunkPlugin 为每个页面间的应用程序共享代码创建 bundle。

由于入口起点增多，多页应用能够复用入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益。

更多关于Webpack基础教程请点击下面的相关文章

您可能感兴趣的文章:

Windows本地部署OpenManus并接入Mistral模型的完整教程
Manus作为一款强大的本地LLM应用平台引起了广泛关注,但它需要邀请码才能使用,不过OpenManus团队仅用了3小时就复刻了一个功能相似的开源替代方案,下面我们来看看在Windows环境下的完整部署过程吧
2025-03-03
科普：多线程与异步的区别
这篇文章主要介绍了科普：多线程与异步的区别,本文讲解了多线程和异步操作的异同、异步操作的本质、线程的本质、异步操作的优缺点、多线程的优缺点等内容,需要的朋友可以参考下
2015-06-06
图像检索之IF-IDF,RootSift,VLAD
TF-IDF是一种用于信息检索的常用加权技术，在文本检索中，用以评估词语对于一个文件数据库中的其中一份文件的重要程度，本文给大家介绍下图像检索之IF-IDF,RootSift,VLAD的相关知识，感兴趣的朋友一起看看吧
2021-12-12
jenkins通过sshPut传输文件时报错Permission denied的SftpException的问题及解决
使用jenkins的ssh插件传输文件至远程机器的指定目录，php程序打包后，经过zip压缩为oms.zip，这篇文章主要介绍了jenkins通过sshPut传输文件的时候，报错Permission denied的SftpException,需要的朋友可以参考下
2023-08-08
idea日常报错之UTF-8不可映射的字符的实现
本文主要介绍了在使用Maven编译Java项目时遇到“UTF-8不可映射的字符”错误的解决方法,具有一定的参考价值,感兴趣的可以了解一下
2025-02-02
vscode的几项基本配置详解
VSCode是一款免费的、开源的、高性能的、跨平台的、轻量级的代码编辑器，这篇文章主要介绍了vscode的几项基本配置，本文给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧
2020-05-05
Git远程操作详解
本文针对初级用户，从最简单的讲起，但是需要读者对Git的基本用法有所了解。同时，本文覆盖了上面5个命令的几乎所有的常用用法，所以对于熟练用户也有参考价值。
2014-08-08
Matlab使用Plot函数实现数据动态显示方法总结
这篇文章主要介绍了Matlab使用Plot函数实现数据动态显示方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-02-02
细说ASCII、GB2312/GBK/GB18030、Unicode、UTF-8/UTF-16/UTF-32编码
本文主要介绍了细说ASCII、GB2312/GBK/GB18030、Unicode、UTF-8/UTF-16/UTF-32编码，详细的介绍了这些编码的知识，具有一定的参考价值，感兴趣的可以了解一下
2023-09-09
基于ChatGPT使用AI实现自然对话的原理分析
ChatGPT是当前自然语言处理领域的重要进展之一，可以生成高质量的文本，可应用于多种场景，如智能客服、聊天机器人、语音助手等。本文将详细介绍ChatGPT的原理、实战演练和流程图，帮助读者更好地理解ChatGPT技术的应用和优势
2023-05-05