Webpack入门1----简介

亦凉 2022-10-04 15:49 168阅读 0赞

## webpack是什么 ##

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。

在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70][]

## webpack五个核心概念 ##

*  入口(entry)
 *  输出(output)
 *  loader
 *  插件(plugins)
 *  模式

**入口(entry)**

入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

**输出(output)**

输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

**loader**

Loader 让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件 (webpack 自 身 只 理 解 JavaScript)

**插件(plugins)**

插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩， 一直到重新定义环境中的变量等。

**模式**

模式(Mode)指示 webpack 使用相应模式的配置。

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th>选项&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>development</td> 
   <td>会将&nbsp;<code>process.env.NODE_ENV</code>&nbsp;的值设为&nbsp;<code>development</code>。启用&nbsp;<code>NamedChunksPlugin</code>&nbsp;和&nbsp;<code>NamedModulesPlugin</code>。</td> 
  </tr> 
  <tr> 
   <td>production</td> 
   <td>会将&nbsp;<code>process.env.NODE_ENV</code>&nbsp;的值设为&nbsp;<code>production</code>。启用&nbsp;<code>FlagDependencyUsagePlugin</code>,&nbsp;<code>FlagIncludedChunksPlugin</code>,&nbsp;<code>ModuleConcatenationPlugin</code>,&nbsp;<code>NoEmitOnErrorsPlugin</code>,&nbsp;<code>OccurrenceOrderPlugin</code>,&nbsp;<code>SideEffectsFlagPlugin</code>&nbsp;和&nbsp;<code>UglifyJsPlugin</code>.</td> 
  </tr> 
 </tbody> 
</table>

注意：只设置 `NODE_ENV`，则不会自动设置 `mode`。

## webpack安装打包 ##

### 初始化配置 ###

初始化 package.json

输入指令：

npm init

下载并安装webpack

输入指令:

npm install webpack webpack-cli -g

npm install webpack webpack-cli -D

第一个是全局安装，下面是项目内安装

###  编译打包 ###

1. 创建文件

2. 运行指令

index.js: webpack入口起点文件

开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development

功能：webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成 浏览器能识别的语法。

webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js

整体打包环境，是开发环境

生产环境指令：webpack src/js/index.js -o build/js/built.js --mode=production

功能：在开发配置功能上多一个功能，压缩代码。

整体打包环境，是生产环境

3. 结论

webpack 能够编译打包 js 和 json 文件，但不能处理css/img等其他资源。

能将 es6 的模块化语法转换成浏览器能识别的语法。

能压缩代码（生产环境比开发环境多一个压缩js代码）

4. 问题

不能编译打包 css、img 等文件。

不能将 js 的es6基本语法转换为es5以下的语法。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70]: /images/20221004/285c973f920244f0a09550e5be14ecdb.png