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的缺点
- 配置有些繁琐
- 文档不丰富
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，并且在使用不同版本的项目中可能会失败。
网友评论