webpack的环境配置

xiaoxiao2021-08-29  968

     许多小伙伴在学到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文件夹,成功显示“我是代码”,环境成功搭建。