一、webpack简介
1.webpack是什么?
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack
处理应用程序时,它会递归地构建一个依赖关系图(dependency
graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
2.webpack作用
- 打包(把多个文件打包成一个js文件,减少服务器压力,带宽)
- 转化(比如less sass ts)需要loader
- 优化(SPA越来越盛行,前端项目负责度高,webpack可以对项目进行优化)
3.webpack构成
- 入口 entry
- 出口 output
- 转化器 loaders
- 插件 plugins
- 开发服务器
- devServer
- 模式 mode
具体概念可查看官网
二、webpack安装
前提条件:
安装webpack之前请确保电脑上已经安装了node.js,如果没有安装可以去官网下载
1.全局安装
npm install --global webpack
2.本地安装
npm install --save-dev webpack
如果你使用 webpack 4+ 版本,你还需要安装 CLI。
npm install --save-dev webpack-cli
3.安装特定版本
npm install --save-dev webpack@<version>
npm install --save-dev
简写:npm install -D
只在开发环境中安装,生产环境中不安装
·
npm install --save
简写:npm install -S
开发环境和生产环境中全都安装