背景
第一次使用Webpack4还不大熟悉,导致测试项目时老是失败。所以找了资料,以下内容参考自 EddyWorkHard ,对其内容进行整理加总结,大家可以参考参考。
注:以下部分npm命令都改用为cnpm,未配置请点击我查看。
1.安装webpack
打开cmd,执行以下命令:
cnpm install webpack -g
2.安装webpack-cli(必装)
安装完后继续输入以下命令:
cnpm install webpack-cli -g
然后输入以下命令查看版本(没显示即安装失败):
webpack -v
3.配置全局package.json
打开你node的安装位置\node-global\node_modules\webpack,找到并打开package.json,添加以下字段:
"scripts": {
"dev": "./node_modules/.bin/webpack --mode development",
"build": "./node_modules/.bin/webpack --mode product",
"des": "./node_modules/.bin/webpack-dev-server"
}
注:原作者并没有注明把这些字段加在全局package.json还是局部package.json,我自行把它加载到全局package.json能正常使用,查阅原文后我猜作者应该放在局部package.json,也就是项目下的package.json文件,这里大家可以尝试看看。另外,以上代码的scripts字段在package.json是已经存在的,添加时直接把里面三行直接添至末尾,如下图:
4.创建项目并打包测试
打开你的项目文件夹,在空白处按住shift+鼠标右键,找到并打开 在此处打开Powershell窗口,输入以下命令:
npm init -y
此时在文件夹中可以看到package.json文件,Powershell并显示package.json文件内容如图:
然后再输入以下命令:
vue init webpack test
注:执行以上命令时请自行安装好vue和vue-cli,否则运行不了。
下载模板后,会跳出选项,前四项直接回车,后面选项直接输入n后回车,如图:
创建完毕后打开test文件夹,你就会发现项目文件夹下生成好多文件,这时才能看到node_modules文件夹。
打开test文件夹,在空白处按住shift+鼠标右键,找到并打开 在此处打开Powershell窗口,输入以下命令安装依赖:
cnpm install
安装完后,再执行以下命令:
npm run dev
等待打包完毕后,会跳出以下信息:
这就表明打包成功啦!复制以上链接到浏览器运行即可查看初始化后的vue项目。
整个流程看似麻烦,但是还是很轻松的。如果有哪里写的不明白,欢迎下方留言哦!