webpack小白的安装入门指南

Webpack安装指南

因为大部分小白在接触webpack的时候总是会踩各种坑，因此。本文将像你介绍如何安装webpack

再此过程中，你可能会遇到一些本文没有涉及到的错误，可以参考安装不成功要检查的三个方面

1、前提条件

在开始之前，请确保安装了 Node.js 的最新版本

因为有墙的缘故，可能导致大家在npm install时卡主的现象，因此在这里建议大家先配置一下

目前有两种方法，一种是安装cnpm镜像，另一种则是使用代理，前者可能会遇到一些新的问题，因此本文建议使用第二种方法。打开cmd命令窗口，输入如下命令即可

npm config set registry https://registry.npm.taobao.org

后续的install等命令还是通过npm运作，而不是cnpm。

2、安装webpack

• 本地安装

  npm install --save-dev webpack
  # 或指定版本
  npm install --save-dev webpack@<version>
  

• 全局安装

  npm install --global webpack
  

我在这里建议进行全局安装，主要是方便小白学习，后续如果因为版本在某些项目遇到问题，再卸载进行本地安装

3、 安装webpack-cli

当你完成上一步时，在通过命令webpack -v查看版本是可能出现如下问题提示：

该提示表示，必须要安装webpack-cli，别担心，输入y之后回车即可自动安装

有的小伙伴在这一步还是可能会遇到新的问题，如下：

因为，我们是在cmd命令窗口进行安装的，因此会提示找不到的提示，这个也不用担心，和webpack安装类似，安装全局的即可

npm install webpack-cli -g

安装完成后，再次查看版本：

4、配置打包模式

在完成前面的步骤后，就可以进行打包了，但是打包后的main,js是单行显示的，不方便阅读，而且会有警告提示：

仔细看它的提示不难知道，是因为没有配置mode。

不要担心，我们新键一个文件，文件名是webpack.config.js，配置如下内容，大概意思就是告诉webpack，我们希望的是生产环境

module.exports = {
	mode: 'development'
}

到这里，就差不多啦。希望大家都能顺利安装webpack，若本方法如有问题，还请指出。