webpack是一个灰常灰常好用的打包工具,它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,在前面学习很火的框架Vue的时候就用到了webpack,但是当时没有深入的了解它,虽然做了一些小测试成功了。。。。今天就来说说webpack吧!

    安装webpack

        * 首先吧,先安装Node,当然要去官网下载然后安装,毕竟人家是个很高大上的东西,没有一点运行环境怎么能行呢!

        * 其次就是安装webpack了,安装之前吧,我个人觉得使用Git安装美滋滋,不过也可以使用cmd安装,如果想用Git那就下载一个git-bash;安装命令是 npm install webpack -g,输入完成后回车,这个时候手千万别乱抓键盘,我就不回车了因为我已经装完了,一直装人家还不愿意呢是吧 

就是它!解释一下,最后为什么是-g呢?因为是全局变量global所以是-g,我个人觉得吧安装为全局会省事好多,安装完成之后呢继续下一步

        * 咋们做个小实验吧,先创建一个放webpack项目的文件夹,创建的时候会用到Linux的语言,是不是很惊啊?也没啥,就是几个常用的几下就行了,cd 就是你想去哪,假如说你想去F盘,那就是

是不是美滋滋?ls 是查看这个里面都有啥?我就不演示了啊。。。说重点,进入到你要创建的那个文件夹里面以后执行npm init它就是初始化的也就是生成package.json文件的,这个时候起package name的时候不能用大写不然会报错;

在这个文件夹里新建两个文件分别是index.html和index.js文件,这两个文件和package.json是同级的。在index.js中写一行代码 document.write("hello world!");  然后在index.html中引入index.js文件。

            * 接下来安装项目依赖就是生成node_modules文件夹的;npm  install webpack --save-dev,安装完成之后进行下一步

        *那基本是不是可以运行了?想多了吧,还没设置打包完成的文件放哪呢,这一步是配置webpack.config.js文件,在目录里新建一个webpack.config.js文件,下面是基础代码


具体的可以查看webpack的中文网哦!

        * 配置好了之后就要进行最后一步操作了,那就是打包了 直接执行  webpack  命令得到:

这就意味着打包完成了,说了半天说好的hello world呢???别急,用浏览器打开index.html文件就可以看到 hello world了!

        如果想看打包后的代码可以打开dist目录下的build.js文件,如果有什么问题请多指教!!!

Logo

前往低代码交流专区

更多推荐