如何用nestjs全栈框架 全栈开发 nestjs webpack

一、什么是webPack：

webPack是自动打包静态资源的工具

二、为什么要用webPack

我感觉主要是三点:
(1)将js和css等静态资源打包成一个文件,减少HTTP请求量。
(2)可预处理一些中间语言,编译成js或者css
(3)方便模块化开发和前后端分离

三、webPack的运行环境

1、webpack通过npm(管理nodejs包的工具)安装,所以先安装nodejs
2、nodejs就是一种运行环境,我理解为js的jdk,安装了之后可以在服务器端运行js
3、nodejs安装之后,就连带安装了npm,然后运行npm init,工程目录下生成一个package.json文件(npm的配置文件)。
4、然后就可以用npm安装webpack等一系列的工具
5、webpack其实就是个js文件，这个js文件指定从哪里打包,资源打包到哪里等配置。

四、package.json和webpack.config.js文件解析

(1)、package.json

{
	  "name": "nodejsdemo",      //项目名
	  "version": "1.0.0",               //版本号
	  "description": "",                 //说明
	  "main": "index.js",              //指定了加载的入口文件
	  "scripts": {
	    "test": "echo \"Error: no test specified\" && exit 1",
	    "dev": "webpack-dev-server --open --config webpack.config.js --contentBase src --hot"  //npm rum dev 的时候加载webpack.config.js(启动webpack-dev-server 的时候加载webpack.config.js文件)
	  },
	  "author": "",
	  "license": "ISC",
	  "devDependencies": {                   //指定项目开发所需要的模块(一些加载器,插件,服务等)
	    "babel": "^6.23.0",
	    "babel-core": "^6.26.3",
	    "babel-loader": "^8.0.6",
	    "babel-plugin-transform-runtime": "^6.23.0",
	    "babel-preset-es2015": "^6.24.1",
	    "babel-runtime": "^6.26.0",
	    "css-loader": "^2.1.1",
	    "extract-text-webpack-plugin": "^4.0.0-beta.0",
	    "vue-hot-reload-api": "^2.3.3",
	    "vue-style-loader": "^4.1.2",
	    "vue-template-loader": "^1.0.0",
	    "webpack": "^4.32.2",
	    "webpack-cli": "^3.3.2",
	    "webpack-dev-server": "^3.4.1"
	  },
	  "dependencies": {                      //项目运行所依赖的模块
	    "style-loader": "^0.23.1",
	    "vue": "^2.6.10"
	  }
	}

(2)、webpack.config.js

var path=require('path');       //引入note自带的模块Path
var ExtractRextPlugin=require('extract-text-webpack-plugin');    //引入插件(这个插件是提取css的)

var config={
	entry:{
		main:'./main'                                       //入口,webpack从当前目录下的main.js开始编译打包
	},
	output:{                                                  //出口配置
		path:path.join(__dirname,'./dist'),      //  文件打包后在 当前目录/dist
		publicPath:'/dist/',                              //在页面上引用  根目录是/dist/
		filename:'bundle.js'                           //打包编译后的文件名为bundle.js
	},
	module:{                                              //模块(webpack的一些插件或者加载器配置)
		rules:[                                              //定义规则
			{                                                  
				test:/\.vue$/,                            //当遇到require文件后缀为.vue的时候,加载对应的加载器
				loader:'vue-loader',
				options:{
					loader:{
						css:ExtractRextPlugin.extract({                //vue文件里面的css,用插件处理
							use:'css-loader',
							fallback:'vue-style-loader'
						})
					}
				}
			},
			{
				test:/\.js$/,
				loader:'babel-loader',
				exclude:/node_modules/
			},
			{
				test:/\.css$/,
				use:ExtractRextPlugin.extract({
					use:'css-loader',
					fallback:'style-loader'
				})
			}
		]
	},
	plugins:[
		new ExtractRextPlugin("bundle.css")                   //打包后,css提取到bundle.css文件里面
	]
};

module.exports=config;                                                 //导出配置模块

五、vue-cli构建工具

上面的npm安装模块和webpack.config.js配置太麻烦了,用vue-cli构建工具可以快速搭建vue工程
步骤:

(1)、安装vue-cli:npm install -g vue-cli
(2)、在命令行工具cmd，或者Intellij IDEA的Terminal中进入想要构建项目的目录，输入vue init webpack project-name，回车(初始化vue工程)

？Project name ---- 项目名称，init命令时也填了个project-name，如果无需更改，直接回车即可；
？Project description ---- 项目描述，按需填写。无需填写可以直接回车；
？Author ---- 作者
？Vue build ---- 构建模式，一般默认第一个；
？Install vue-router? ---- 是否安装vue-router。选Y。后边构建项目会用到。
？Use ESLint to lint yout code? ---- 格式校验，按需；
？Set up unit tests ---- 测试相关，按需；
？Setup e2e tests with Nightwatch? ---- 测试相关，按需；
？Should we run ‘npm install’ for you after the project has been created? ---- 按需，这里我选Yes, use NPM。如果选No，后续自己在目标
目录下执行npm install即可。

目录: