webpack01-介绍

webpack介绍

Webpack是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

image.png

从图中我们可以看出，Webpack可以将js、css、png等多种静态资源进行打包。

webpack的功能

模块化开发

程序员在开发是可以分模块创建不同的js、css等小文件方便开发，最后使用webpack将这些小文件打包成一个文件，减少http的请求次数。

Webpack可以实现按需打包，为了避免出现打包文件过大可以打包成多个文件。

编译typescript、ES6等高级语法

随着前端技术的强大，开发中可以使用JavaScript的很多高级版本，比如：typescript、ES6等，方便开发，webpack可以将打包文件转换成浏览器可识别的js语法。

CSS预编译

webpack允许在开发中使用Sass和Less等原生CSS的扩展技术，通过saas-loader、less-loader将Sass和Less的语法编译成浏览器可识别的css语法。

webpack的缺点

1. 配置有些繁琐
2. 文档不丰富

webpack安装

先决条件

在我们开始之前，请确保您有一个新版本的Node.js安装。目前的长期支持（LTS）版本是一个理想的起点。您可能会遇到旧版本的各种问题，因为它们可能缺少webpack和/或其相关软件包所需的功能。

node.js中已经集成了npm工具。在命令行中使用npm -v可查看当前npm版本。

webpack安装

本地安装

最新的webpack版本是：

要安装最新版本或特定版本，请运行以下命令之一：

npm install --save-dev webpack
npm install --save-dev webpack@<version>

如果您使用的是webpack v4或更高版本，则需要安装CLI。

npm install --save-dev webpack-cli

我们建议大多数项目使用本地安装。这样可以在引入更改更改时更轻松地单独升级项目。通常，webpack通过一个或多个npm脚本运行，这些脚本将在本地node_modules目录中查找webpack安装：

"scripts": {
    "build": "webpack --config webpack.config.js"
}

要运行webpack的本地安装，您可以访问其bin版本node_modules/.bin/webpack。

全局安装

以下NPM安装将在webpack全球范围内提供：

npm install --global webpack

请注意，这不是推荐的做法。全局安装会将您锁定到特定版本的webpack，并且在使用不同版本的项目中可能会失败。