webpack之初体验

THIS

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

起步

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

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

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

运行

直接打开你的index.html 你会发现会发现出现这样的
图片描述

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

webpack登场

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

图片描述

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

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

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

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

阅读 929

多读书、多看报、少吃零食、多睡觉

716 声望
9 粉丝
0 条评论

多读书、多看报、少吃零食、多睡觉

716 声望
9 粉丝
文章目录
宣传栏