webpack学习 (2)

webpack学习

解决方法:因为没有安装对应包,需要安装一下:

webpack学习

成功后在package.json中可以查看依赖包

webpack学习

4:在安装时可能会报错不存在webpack一些问题,安装之前需要初始化:

webpack学习

初始化完成后项目中将存在json文件和node_modules:

webpack学习

5:如果全局安装,现在又想本地安装,需先删除全局:

webpack学习

6:NPM错误!在1:257的基准下没有找到任何值

webpack学习

解决方法:

1.卸载本地node

2.删除本地  ../AppData/Roaming/npm   ../AppData/Roming/npm-cache  这两个文件夹

   windows命令path查看你的位置在哪里   我本地位置:C:\Users\***\AppData\Roaming\npm   C:\Users\***\AppData\Roaming\npm-cache

3.重新下载安装node 

  官网地址:https://nodejs.org/en/ 

4.检查node安装是否成功

  >node -v    --查看node版本

  >npm -v     --查看npm版本

  >npm install webpack -g    --安装webpack

  >webpack -h   --查看webpack版本

如果以上命令执行都ok,那么恭喜你,环境已经安装好了。

四:webpack可以做什么呢

1:webpack可以处理js间的相互依赖关系

2:webpack能处理js的兼容问题,把高级的浏览器不识别的语法转为低级的能正常识别的语法

 五:配置文件webpack.config.js

配置打包文件出口入口

webpack学习

命令行直接运行命令打包

webpack学习

注意:可能会出现错误:

webpack学习

解决方法:命令行打包时既没有给出口入口文件,也没有配置文件进行配置出入口

过程分析:当我们在控制台直接输入webpack命令执行的时候,webpack做了以下几步:

1:首先webpack发现,我们并没有通过命令的形式,给它指定入口和出口

2:webpack就会去项目的根目录中区查找一个叫做webpack.config.js的配置文件

3:当找到这个配置文件后,webpack会执行并解析这个配置文件,会得到配置文件中导出的配置对象

4:当webpack拿到配置对象后,就拿到了配置对象中指定的入口和出口,然后进行打包构建

六:使用webpack-dev-server工具,实现自动打包编译功能

简介:是一个小型node.js express服务器,新建一个开发服务器,可以serve我们pack以后的代码,并且当代码更新的时候自动刷新浏览器,启动webpack-dev-server后,你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。

本地安装:

webpack学习

注意:安装完后直接执行命令会报错

webpack学习

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpwxjg.html