webpack的安装及使用

1.首先得安装好nodeJs以及npm(现在一般官网下载nodeJs的.msi安装包会默认给你安装上npm),安装完之后进行(图一)的操作,如果能获取到版本号就进行第二步操作。

图一

2.完成第一步操作之后我们可以进行webpack的安装了,使用(npm install -g webpack webpack-cli)进行webpack,webpack-cli的全局安装,安装完成之后进行 (图二)的操作,如果能获取到版本号就进行第三步操作。

图二

3.完成第二步操作之后我们的webpack就已经安装好了,接下来就是教你怎么使用了,自己新建一个项目空目录,然后在这个目录里面新建一个package.json的文件 ,再然后在这个项目目录下面执行命令(npm init[会询问你一些问题,可以直接回车跳过])这时候你的package.json文件里面会生成一些配置信息,之后在这个项目目录下面执行命令( npm  install  webpack  webpack-cli  --save-dev )进行包仓库下载( 类似后端的maven仓库 ),上述完成之后在创建的目录下面再创建一个src目录和index.html文件以及dist目录,然后在src目录下面创建index.js文件以及init.js文件,每个文件内容如下图:图下内容完成之后就可以进行第四步了。

图三


图四


图五

4.上述步骤完成之后我们可以进行打包操作了,我们还是在项目目录下输入命令(webpack),然后在package.json里面配置如下图六内容:(其中的build也可改为:图七的内容),前面的完成之后我们可以进行打包了,使用图六或者图七里面备注的命令进行打包,用的哪一种方式就用对应的打包方式,其中的区别请看图八。

图六(可以使用npm  run  dev)打包


图七(可以使用npm  run  build)打包


图八

5.完成上述操作,我们的webpack就已经打包好了,图九是一些总结:

图九

6.最后一步的一些操作就是配置webpack.config.js这个配置文件了,也是webpack最重要的一部分,一般网上都有一些写好的配置,直接下载下来就可以了,运行方法请自行百度,886,886,see you tomorrow

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容