webpack4傻瓜式安装方法

时间:2024-05-20 16:24:45

安装环境

用webpack打包之前,首先要安装的是node.js环境,有了node.js环境之后,才能运行npm指令。
记得用一个nodejs文件夹把装的东西包一下,不然就会很乱。
具体教程在网上,我在此就不一一赘述。
推荐这个教程。
https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html
webpack4傻瓜式安装方法
总之,当在命令行打开任何目录,都可以输出node、npm的版本号时,第一步就完成了。(我是按上面那个教程配的,我不清楚不按教程配置会不会都能输出)

创建文件夹

在刚刚我让你们创建的nodejs文件夹中创建两个文件夹,用来全局存放依赖包路径,和缓存路径。
webpack4傻瓜式安装方法
然后在全局环境中运行这两个指令
webpack4傻瓜式安装方法
(输入指令后,命令行闪一下,不会有任何提示)

webpack安装

  • 安装全局的webpack

npm install -g webpack

  • 安装全局的webpack-cli,因为现在的webpack是4.x版本,所以需要安装

npm install -g webpack-cli

有以下提示说明安装成功了

webpack4傻瓜式安装方法
此时我们用webpack进行打包,会报错(其实如果按最开始我给你的node.js链接配置环境,就不会报错了)
webpack4傻瓜式安装方法
这是因为我们还没有进行环境变量的配置

环境变量配置

(我的系统版本是win10,我不知道不同系统之间会不会有出入)
右键:我的电脑->属性->高级->环境变量

  • 为path设置路径
    注意,这里的path有可能是Path,也有可能是PATH,所以你需要选择有npm的这个(这个是默认路径)
    webpack4傻瓜式安装方法

然后改为

webpack4傻瓜式安装方法

  • 为node_path设置路径
    webpack4傻瓜式安装方法
    这些成功的前提是你的文件夹得放对位置。

安装缺少的模块(给没有装好的人)

如果你好好安装,这一步是可以省略的,因为不会有缺少的模块。
我之前已经安装成功了,在我把路径移动之后,却出现了,cant find module ***的问题
解决这类问题的最好办法就是,安装所缺少的模块,类似打补丁
webpack4傻瓜式安装方法
webpack4傻瓜式安装方法
大概就是,缺啥装啥的意思。

webpack打包文件

首先,你路径得对,这我就不多说了
webpack 要打包的文件的路径 -o 被打包到的文件的路径(这个文件可以是存在的,可以是不存在的,因为是新版本所以有-o)。