1 Webpack 概念

太过爱你忘了你带给我的痛 2023-02-28 04:02 6阅读 0赞

阅读本系列教程，你需要对ES6的import，export有了解

本系列教程1-8为webpack概念说明文档，其余为实际应用教程

本教程转=出自自Webpack中文文档：[https://www.webpackjs.com/concepts/][https_www.webpackjs.com_concepts]，经过个人修改而成，感谢Webpack中文文档的所有贡献者

笔者不生产水，我只是大自然的搬运工

## **Webpack做了什么？** ##

如我们在src文件夹下面有a.js，b.js，c.js，其中a.js import了b.js，而b.js又import了c.js，而webpack可以将者3个文件打包成一个文件，其中a,b,c文件称为chunk（组块），打包出来的文件称为bundle（包）

从这可以看出Webpack主要功能是将我们的多个文打包为一个文件

# #

## **入口(entry)** ##

可以通过在 [webpack 配置][webpack]中配置 entry 属性，来指定一个入口起点（或多个入口起点）如下指定我们的入口文件为file.js

webpack.config.js

module.exports = \{

entry: './path/to/my/entry/file.js'

\};

# #

## **出口(output)** ##

output 属性告诉 webpack 在哪里输出它所创建的 *bundles**（**包，打包了的文件**）*，以及如何命名这些文件，默认值为 ./dist。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

**webpack.config.js**

const path = require('path');

module.exports = \{

entry: './path/to/my/entry/file.js',

output: \{

path: path.resolve(\_\_dirname, 'dist'),

filename: 'my-first-webpack.bundle.js'

\}\};

Path为输出路径，filename为输出文件名称

## **loader** ##

webpack 无法处理非 JavaScript 文件（如：import img from ‘a.jpg’），这就需要一个loader将文件转为webpack可以处理的格式

在 webpack 的配置中 **loader** 有两个属性：

1.  test 属性，用于匹配需要使用loader转换处理的文件。
2.  use 属性，表示进行转换时，应该使用哪个 loader。

**webpack.config.js**

const path = require('path');

const config = \{

output: \{

filename: 'my-first-webpack.bundle.js'

\},

module: \{

rules: \[

\{  test: /\\.txt$/,  use: 'raw-loader' \}

\]

\}\};

module.exports = config;

以上配置中，告诉 webpack 编译器(compiler) 如下信息：

嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先**使用** raw-loader 转换一下。

## **插件(plugins)** ##

loader 被用于转换某些类型的模块（也就是一个文件），而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。

**webpack.config.js**

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装

const config = \{

module: \{

rules: \[

\{  test: /\\.txt$/, use: 'raw-loader' \}

\]

\},

plugins: \[

new HtmlWebpackPlugin(\{ template: './src/index.html'\})

\]\};

module.exports = config;

# #

# #

## **模式** ##

就是当前环境（如：开发环境，生成环境等），通过选择 development 或 production 之中的一个，来设置 mode 参数

module.exports = \{

mode: 'production'

\};

[https_www.webpackjs.com_concepts]: https://www.webpackjs.com/concepts/
[webpack]: https://www.webpackjs.com/configuration

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关 Webpack概念

文章目录 * 引入 * 概念引入 <!DOCTYPE html> <html lang="en"> <head> ...

深碍√TFBOYSˉ_/ 2024年04月17日 06:01/ 0 赞/ 94 阅读

相关 webpack的四个核心概念

从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念：入口(entry)

浅浅的花香味﹌/ 2023年10月18日 09:13/ 0 赞/ 110 阅读

相关 Webpack_（高级概念4.1）_Tree Shaking 概念详解

Tree Shaking 概念详解 Tree Shaking指的是什么？打开项目进入index.js文件中，清空代码，然后打包项目，不会报错，但是实际上会报一个警告

梦里梦外;/ 2023年06月24日 08:05/ 0 赞/ 166 阅读

相关 webpack 基本概念

文章目录一、什么是 webpack 二、五个核心概念 1. 入口（entry）

约定不等于承诺〃/ 2023年03月04日 08:29/ 0 赞/ 76 阅读

相关 1 Webpack 概念

阅读本系列教程，你需要对ES6的import，export有了解本系列教程1-8为webpack概念说明文档，其余为实际应用教程本教程转=出自自Webpack中文文档：

太过爱你忘了你带给我的痛/ 2023年02月28日 04:02/ 0 赞/ 7 阅读

相关 webpack 基础概念理解

一、webpack 基础概念理解 1. 本质上，`webpack` 是一个现代 `JavaScript` 应用程序的静态模块打包器(`module bundler`)。

叁歲伎倆/ 2023年02月11日 10:26/ 0 赞/ 55 阅读

相关 webpack 项目使用--创建webpack 项目（1）

1.新建一个文件夹假设文件夹的名称为 wdgapp，并且通过命令行到该目录下 ![20210805204946585.png][] 2. 初始化项目 npm

喜欢ヅ旅行/ 2022年09月03日 05:19/ 0 赞/ 272 阅读

相关 webpack四个基本概念

记性不好的我又来拉。 webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) > [webpack官方文档][webpa

分手后的思念是犯贱/ 2022年05月30日 01:43/ 0 赞/ 243 阅读

相关 webpack概念

随着前端工程越来越复杂，单独建几个文件写业务代码已经无法保证项目的可维护性，所以就把不同的业务逻辑拆成模块，然后去分开引入这些模块，每个模块做自己的事情，这样就能保证项目的可维

青旅半醒/ 2022年01月11日 05:43/ 0 赞/ 333 阅读

相关 webpack核心概念

1、概念本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归...

小灰灰/ 2021年04月19日 14:21/ 0 赞/ 694 阅读