在看黑马视频学习vue的时候，学到了webpack项目这一章的时候，需要安装webpack的项目环境这些东西，
出现了如下问题：
1、刚开始在cmd中输入webpack –v的时候出现了'webpack'不是内部或外部命令，也不是可运行的程序，这个原因是因为需要配置环境变量，找到安装路径中的\bin，然后在到环境变量中的path中去设置，ok,第一个问题解决，感谢同学的帮忙
2、当输入webpack ./src/main.js ./dist/bundle.js
出现如下错误：
下面视频中提醒说是因为webpack的版本不一样，老师使用的是3.0几的版本，而我使用的版本如下：
哇，这个差别，老师讲课的是2017年的，而我现在是2019年，时隔一年多版本更新竟是如此之快，所以学习前端一定要勤，不然跟不上步伐。
那如何解决呢？百度吧，哈哈
Webpack的使用方法
webpack可以在终端中使用，在基本的使用方法如下：
# {extry file}出填写入口文件的路径，本文中就是上述main.js的路径，
# {destination for bundled file}处填写打包文件的存放路径
# 填写路径的时候不用添加{}
webpack {entry file} {destinationforbundledfile}
解决方法：
a.更换打包命令为: webpack
./src/main.js -o ./dist/bundle.js==（webpack ./src/main.js --output ./dist/bundle.js）
其中 bundle.js是打包后生成的文件的文件名，
可以看到main.js已经被打包为了bundle.js文件
但是终端中依然有黄色的警告
那是不是说明没有打包成功呢？
黄色警告是生命原因呢？
黄色部分的警告的意思是，没有设置模式,有开发模式和生产模式两种，
找到接下来，找到package.json.添加上”dev”和”build”这两个信息以及他们的值：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack --mode development",
"build":"webpack --mode production"
},
输入命令：npm run dev
Look,还是报错了，原因是，输入命令 npm run dev 的时候，会默认打包src文件夹下的main.js文件，打包完成后是放在dist中的bunle.js文件,
我们先创建src文件，还有一个dist文件，存放默认的打包生成的文件, 然后在src里再创建index.js文件
重新输入命令：npm run dev ，如下图，dist文件夹里会自动生成一个main.js文件，并且无任何警告或报错出现，说明的问题已经解决了
回家第二十一天
网友评论