webpack 是一个前端模块化打包工具。可以进行方便的前端模块化打包操作。

运行环境 Runtime environment

1
2
操作系统 : Windows10
IDE: webStorm2019.3.3

概述

Webpack 是一個開源的前端打包工具。
Webpack 提供了前端開發缺乏的模組化開發方式,將各種靜態資源視為模組,並從它生成最佳化過的程式碼。
Webpack可以從終端、或是更改 webpack.config.js 來設定各項功能。 要使用 Webpack 前須先安裝 Node.js。

安装

依赖检查

webpack 需要npm软件包管理工具,该管理工具的使用需要安装Node.js。

查看自己的node版本

1
node -v

如果安装了nodejs,便会有返回的版本号。如果没有返回版本号,去百度搜一下如何安装nodejs,不赘述了。

全局安装webpack

查看自己的wenpack版本

1
webpack --version

‘webpack’ 不是内部或外部命令,也不是可运行的程序或批处理文件。

说明没有安装,输入安装命令

1
npm install webpack -g

博主这一安装,哇,喷涌出大量npm警告。赶紧查了一下webpack –version 看看安装成功了没。

1
2
3
4
5
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
- webpack-cli (https://github.com/webpack/webpack-cli)
The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no): yes

行吧,那就yes一下。安装成功。

总结

我还专门问了一个经常写前端的老同学.
他说如果为了学Vue,vueCLI这东西自带了封装工具.
WP工具除非是大型web项目,基本用不上.