webpack初探 —— 《webpack的安装》

快来打我* 2022-09-04 10:58 208阅读 0赞

## 前言： ##

> 由于之前用过vue-element-template作为基础模板进行了开发，所以本地也全局安装了一些npm，比如babel、webpack等，所以就产生了以下我要解决的问题

###  问题描述： ###

> webpack-cli (https://github.com/webpack/we…  
> The original webpack full-featured CLI.  
> webpack-command (https://github.com/webpack-co…  
> A lightweight, opinionated webpack CLI.  
> We will use “npm” to install the CLI via “npm install -D”.

大概意思就是我没有安装webpack-cli，但是我明明执行了**npm i webpack-cli -g**啊，为啥还报错呢？

### 问题分析： ###

> 1、真的没有安装，但是如果真的没有安装按照道理来说执行了npm i webpack-cli -g这条命令应该是可以的
> 
> 2、之前全局安装了，但是冲突了，我认为我的问题可能出现在这里

### 解决问题： ###

有了以上解决问题了思路，所以我就按照第二个问题进行了解决，就是我之前装过，但是这次版本不一致导致冲突的问题，所以要先删除掉之前的版本，具体全局安装目录

> C盘 ——> users ——> 用户名(Admin) ——> AppData ——> Roaming ——> npm ——> 删除根目录的webpack和webpack-cli相关的东西 ———> 打开node\_modules ——> 删除掉webpack和webpack-cli文件夹

然后再次打开你的项目，把node\_modules、package.json、package-lock.json删除掉，然后依次执行下面的命令

1、初始化项目

npm init

2、全局安装webpack和webpack-cli

npm i webpack webpack-cli -g

3、项目安装webpack和webpack-cli

npm i webpack webpack-cli -D

4、检验是否安装成功

webpack -h

### 输出结果： ###

> Options:  
>   -c, --config <value...>                Provide path to a webpack configuration file e.g. ./webpack.config.js.  
>   --config-name <value...>               Name of the configuration to use.  
>   -m, --merge                            Merge two or more configurations using 'webpack-merge'.  
>   --env <value...>                       Environment passed to the configuration when it is a function.  
>   --node-env <value>                     Sets process.env.NODE\_ENV to the specified value.  
>   --progress \[value\]                     Print compilation progress during build.  
>   -j, --json \[value\]                     Prints result as JSON or store it in a file.  
>   -d, --devtool <value>                  Determine source maps to use.  
>   --no-devtool                           Do not generate source maps.  
>   --entry <value...>                     The entry point(s) of your application e.g. ./src/main.js.  
>   --mode <value>                         Defines the mode to pass to webpack.  
>   --name <value>                         Name of the configuration. Used when loading multiple configurations.  
>   -o, --output-path <value>              Output location of the file generated by webpack e.g. ./dist/.  
>   --stats \[value\]                        It instructs webpack on how to treat the stats e.g. verbose.  
>   --no-stats                             Disable stats output.  
>   -t, --target <value...>                Sets the build target e.g. node.  
>   --no-target                            Negative 'target' option.  
>   -w, --watch                            Watch for files changes.  
>   --no-watch                             Do not watch for file changes.  
>   --watch-options-stdin                  Stop watching when stdin stream has ended.  
>   --no-watch-options-stdin               Do not stop watching when stdin stream has ended.
> 
> Global options:  
>   --color                                Enable colors on console.  
>   --no-color                             Disable colors on console.  
>   -v, --version                          Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and commands.  
>   -h, --help \[verbose\]                   Display help for commands and options.  
>  
> 
> // 下面不在贴出.........................

到此问题得以解决。