安装环境
用webpack打包之前,首先要安装的是node.js环境,有了node.js环境之后,才能运行npm指令。
记得用一个nodejs文件夹把装的东西包一下,不然就会很乱。
具体教程在网上,我在此就不一一赘述。
推荐这个教程。
https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html
总之,当在命令行打开任何目录,都可以输出node、npm的版本号时,第一步就完成了。(我是按上面那个教程配的,我不清楚不按教程配置会不会都能输出)
创建文件夹
在刚刚我让你们创建的nodejs文件夹中创建两个文件夹,用来全局存放依赖包路径,和缓存路径。
然后在全局环境中运行这两个指令
(输入指令后,命令行闪一下,不会有任何提示)
webpack安装
- 安装全局的webpack
npm install -g webpack
- 安装全局的webpack-cli,因为现在的webpack是4.x版本,所以需要安装
npm install -g webpack-cli
有以下提示说明安装成功了
此时我们用webpack进行打包,会报错(其实如果按最开始我给你的node.js链接配置环境,就不会报错了)
这是因为我们还没有进行环境变量的配置
环境变量配置
(我的系统版本是win10,我不知道不同系统之间会不会有出入)
右键:我的电脑->属性->高级->环境变量
- 为path设置路径
注意,这里的path有可能是Path,也有可能是PATH,所以你需要选择有npm的这个(这个是默认路径)
然后改为
- 为node_path设置路径
这些成功的前提是你的文件夹得放对位置。
安装缺少的模块(给没有装好的人)
如果你好好安装,这一步是可以省略的,因为不会有缺少的模块。
我之前已经安装成功了,在我把路径移动之后,却出现了,cant find module ***的问题
解决这类问题的最好办法就是,安装所缺少的模块,类似打补丁
大概就是,缺啥装啥的意思。
webpack打包文件
首先,你路径得对,这我就不多说了
webpack 要打包的文件的路径 -o 被打包到的文件的路径(这个文件可以是存在的,可以是不存在的,因为是新版本所以有-o)。