node.js和webpack搭建项目及服务器开发

npm包管理工具

nrm用于管理包镜像地址，只是地址管理，无法改变命令
1.运行npm i nrm -g安装nrm
2.使用nrm ls查看可用的镜像地址
3.使用nrm use npm切换镜像源地址

快速搭建项目

1. 运行npm init -y快速初始化项目；
2. 在项目根目录创建src源代码目录和dist发布目录；
3. 在src目录下创建index.html；
4. 运行 npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D安装webpack；
5. 根目录创建webpack.config.js：

const path = require('path')
// 将打包的js注入页面中
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = { 
  mode: 'production',  //development    production
  plugins: [
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'),
      filename: 'index.html'
    })
  ]
}

6. src目录中新建index.js文件入口文件：
   约定大于配置，默认入口文件index.js；
7. 修改package.json，用于指定实时编译工具：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 7100 --hot --host 127.0.0.1"
  },

8. 执行npm run dev编译项目，并等待实时编译

无法识别的内容

• 根据项目中的需要，安装对应的包即可，无需全部安装

npm i style-loader css-loader -D
npm i url-loader file-loader -D

npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D

npm i babel-preset-react -D

或者直接一行安装所有

npm i style-loader css-loader url-loader file-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 babel-preset-react -D

• 安装完成后需要修改 webpack.config.js文件：

//配置规则节点
module.exports = {
  mode: ‘production’,  //development    production
  plugins: [
    new htmlWebpackPlugin({
      template: path.join(__dirname, ‘../src/index.html’)
      filename: ‘index.html’
    }),
  ],
  module: {
    rules:[
      //设置所有.css结尾的文件处理对象，use右到左顺序执行
      { test: /\.css$/,use: [‘style-loader’, ’css-loader’]}，
      { test: /\.less$/,use: [‘style-loader’, ’css-loader’, ‘less-loader’]},
      // limit设置打包base64文件大小，小于指定值时，会将图片打包成base64，否则仍然是图片地址
      //name名称保持不变，如果不设置name参数则使用hash地址。
      //只使用name可能会导致名称冲突，添加部分hash值即可
      { test: /\.(jpg|png|gif|bmp|jpeg)$/,use: [‘url-loader’?limit=1025&name=[hash:8]-[name].[ext],]}，
      //用来转换高级的es6+语法，排除node_moules目录
      { test: /\.js|jsx$/, use:‘babel-loader’, exclude: /node_modules/}
    ]
  },
  resolve: {
    //表示这些文件后缀 可以省略不写
    extensions: [‘.js’, ‘.jsx’, ‘.json’],
    alias: {
      //设置vue结尾被导入包的路径
      ‘vue$‘:  ‘vue/dist/vue.js’,
      //@ 用来表示源码路径
      ‘@: path.join(__dirname, ‘./src’)
    }

  }
}

• 还需要在根目录创建一个.babelrc文件；
  比如：想要使用es6语法

{
  “presets”: [“env”, “stage-0”, “react”],
  “plugins”: [“transform-runtime”]
}

使用nodemon自动执行node命令

基本服务

path.join(__dirname, ‘public’, ‘index.html’) 拼接目录

var http = require(‘http’)
http.createServer(function(req,res){
  //每次请求 req.url请求地址
  //1.扩展上下文对象方法
  //2.路由解析
  //3.请求业务
  //4.数据库访问
  res.end();
}).listen(8080,function(){
  //监听服务端口
})

Buffer字节对象

Buffer.const(Array) //d

var array = [0x68, 0x65];
var buf = Buffer.from(array); //创建一个buffer对象 ，Array|String
buf.toString(‘utf8’); //字节组转成字符串
Buffer.byteLength(‘你好’) //获得字节个数

express框架基于nodejs的一个web开发框架

expressjs一个web框架特点：

• 实现了路由功能
• 中间件（函数）功能
• 对req和res对象的扩展
• 可以继承其他模版引擎

var express = require(‘express’)
var path = require(‘path’)

//创建一个app对象，类似于server对象
var app = express()
//注册index路由请求
app.get(‘/index’, function(req,res){
  //res.end() 参数String|Buffer
  //res.send()  参数 String|Buffer|Object|Array,会自动设置报文头utf-8
  res.send(‘hello world!’);
});

//不限定请求方式，开头符合/index监听即可
app.use(‘/index’,function(req,res){  });
//不限定请求方式，必须完全匹配/index
app.all(‘/index’,function(req,res){  });
//假如静态资源在public目录中
app.use(‘/’, express.static(path.join(__dirname,’public’)));

//监听指定端口
app.listen(8080,function(){
//监听8080端口
})

• 支持正则/^/index(/.+)*$/ 匹配index页面或index目录
• /news/:year/:month/:day 匹配/news/2020/06/27使用req.params获取一个参数对象

在自定义封装的router.js 中使用router对象注册路由

var express = require(‘express’);
var router = express.Router();

router.get(‘/index’, function(req, res){  });
module.exports = router;

在app.js中使用

var router = require(‘./router.js’);
app.use(router); //注册所有的路由信息