webpack之初体验

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了webpack之初体验脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

目前webpack的已经很成熟,但是小弟还是想记录一下学习的历程,不管是对于新手还是对于自己。

起步

新建一个文件夹,大概是这个样子的
图片描述

... 是不是觉得简单?是的就如标题就是这么简单!嘿嘿,其实不是的 webpack之所以称为自动化打包工具你得有文件,
假设一个场景:现在有三个javascript文件,我要打包成一个文件怎么做呢?
比如是这样的:
图片描述

这边涉及到两个知识点就是:ES6的 export defaultimport 如果看不懂的话 你就大概理解成就是模块之间的引用就成了,反正以后用的时间长了 也就明了了

运行

直接打开你的index.htML 你会发现会发现出现这样的

webpack之初体验

这是在告诉你 浏览器不认识你写的import的语法,(虽然ES6已经普及很长时间 但是还是有的语法还是很多的的兼容

webpack登场

新建一个 webpack.config.js 文件,为什么叫这个名字呢?因为你不叫这个名字会报错 这是webpack默认的文件名称 (当然这是可以改变的)
大概就是这个样子的

webpack之初体验

这样的话webpack最基本的配置已经配置完毕了,然后我们初始一下

webpack之初体验

然后我安装webpack
这个要说明一下 cnpm i -D webpack 里面 都是简写cnpm 是手淘的npm;i 就是 install; -D就是开发环境;
我用的是cnpm 就是俗称的手淘滤镜 国内吗 还是这个比较快的 当然你能翻墙的话 还是用正版的npm 比较好 毕竟什么东西都是原装的好~

webpack之初体验

就会在文件里面得到一个package.json文件,在里面的设置

webpack之初体验


然后我命令行走起来

webpack之初体验


还记得我们的dev 怎么设置的吗?对的 就是在配置文件里面的dev命令 然后运行的webpack,这样的话webpack 就会在文件里面找webpack.config.js的文件 当然你可以改变他的名字 比如

webpack之初体验

就可以了 打包的文件你可以找到相应的路径引用就可以

脚本宝典总结

以上是脚本宝典为你收集整理的webpack之初体验全部内容,希望文章能够帮你解决webpack之初体验所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。