Yarn+webpack 构建项目(二)

Posted 2023-03-26

参考技术A 上篇文章 Yarn+webpack构建项目(一) 已经交代清楚webpack和react如何集成进项目。
这篇文章将接着完善我们的项目，主要目的是打造一个舒适的开发环境。

参考1: https://segmentfault.com/a/1190000012631766#articleHeader4
参考2: https://beanlee.github.io/2018/06/11/something-about-webpack-4/

为了能直接访问项目打包后的页面，可以配置一下服务器

配置到这里，执行 yarn run dev 就可以编译打包项目，并且通过浏览器访问 localhost:3000 就能看到结果。

构建vue项目的相关命令

前提是node、webpack、vue-cli等等已经装好了，然后用如下命令进行项目构建，过程中会有提示，包括工程名、作者、是否使用路由，构建完成后是否执行npm install等等（如下图，也可以试试yarn，前提是得装了yarn，这个貌似比较快，或者选择不处理，后面自己执行isntall，在构建完成后，用cnpm isntall进行安装。npm isntall总卡住，无解。）

vue init webpack <projectName>	#以webpack模板构建新的vue工程，projectName是工程名
或：
vue init webpack-simple <projectName>	#以webpack-simple模板构建新的vue工程，projectName是工程名，这两个构建方式用其一，两种构建方式的目录结构内部有差异，详细区别未深入了解

或者，在https://github.com/vuejs-templates/下载webpack（或 webpack-simple）模板，把解压出的文件夹放在C:\\Users\\Administrator.vue-templates，然后用如下命令进行离线构建

vue init webpack project --offline
或：
vue init webpack-simple project --offline

构建完成以后，进入工程目录，执行

cnpm i	 #同cnpm isntall

完成后，在工程目录下会出现node_modules目录，里面存放的是相关模块的依赖。