许多小伙伴在学到vue时,当做单页面应同时,不可避免的会用到webpack,可是那都是命令自动帮我们做好的,如果想在自己的项目中运用的话,又该怎么做呢?
我在看了一些视频和文档后,决定自己写一篇博客来记录一下我的学习过程,方便广大博友一起学习进步。
步骤:
1打开我们的命令行工具,先进入E盘,然后mkdir命令新建一个文件夹demo,在建立一个webpack_demo。然后进入webpack_demo文件夹(这是我的项目文件夹,具体根据自己的实际情况建立文件夹)。
2.先输入npm init -y初始化一下项目,然后输入cnpm i --save webpack,等待安装完成。
3安装过程中,按照下图的格式建立这些文件夹和文件。
4在index.html文件里输入这样的内容,引入的js是我们打包后的js,先引入进来。
5.index.js里输入这样的内容。
7.我在看视频学习时,按照视频输入 webpack src/index.js dist/bunde.js,命令行报错如下ERROR in multi “webpack src/index.js dist/bunde.js”大概意思就是这个命令是错误的,后来一查才知道视频里的webpack版本是3.6,我的已经是4.20了,命令行代码已经改变,重新输入了 webpack src/index.js -o dist/bunde.js。
8之后dist文件夹多了一个bunde.js文件,这就是打包好的js文件。
9然后执行cnpm i live-server -g,目的是为了更快的打开我们的项目。
10安装成功后,在输入live-server,浏览器就会自动打开(如下),打开dist文件夹,成功显示“我是代码”,环境成功搭建。