读写文件

fs & path 模块

const fs = require('fs');		// 引入fs读写模块
const path = require('path');	// 引入path路径模块

// 写文件
fs.writeFile(path.join(__dirname, "hello.txt"), 'Hello, World!', (err) => {
    if (err) console.log(err);
    else console.log('File written successfully\n');
})

// 读文件
fs.readFile(path.join(__dirname, "hello.txt"), 'utf-8', (err, data) => {
    if (err) console.log(err);
    else console.log('File data: ' + data);
})

Web服务

创建Web服务

const http = require('http');		// 引入http模块

const server = http.createServer();		// 创建新的服务实例
server.on('request', (req, res) => {	
    // 设置文本类型和字符集
    res.hasHeader('Content-Type', 'text/plain;charset=utf-8');
    res.end('welcome to Node.js server');
});

// 开启9999端口服务
server.listen(9999, () => {
    console.log('Node server start');
})

导出与导入

CommonJS标准 - 默认

• 导出

  function getSum(arr){
      return arr.reduce((a, b) => a + b, 0);
  }
  
  const sumArr = [1,2,3,4,5,6] 
  
  module.exports={			// 将方法或者数据导出暴露出去
      getSum,
      sumArr
  }

• 导入

  const utils = require('./utils.js');			// 导入模块文件，能使用其导出的数据方法
  
  console.log(utils.getSum(utils.sumArr));

ECMAScript标准

• 前提：目录下需要package.json

  {
      "type": "module"
  }

• 导出

  function getSum(arr){
      return arr.reduce((a, b) => a + b, 0);
  }
  
  const sumArr = [1,2,3,4,5,6] 
  
  export default {sumArr, getSum}			// 将方法或者数据导出暴露出去

• 导入

  import utils from "./utils.js"
  
  console.log(utils.getSum(utils.sumArr));		// 导入模块文件，能使用其导出的数据方法

npm软件包管理器

1. 初始化清单文件：npm init -y
2. 下载软件包：npm i 软件包名称
3. 删除软件包：npm uni 软件包名称
4. 安装所有依赖：npm i

Webpack

基础

1. 安装：npm i webpack webpack-cli --save-dev

2. 配置：在package.json添加自定义命令

   {
       "scripts": {
   		"build":"webpack"	// 配置编译工具为webpack
   	}
   }

3. 执行命令：npm run build

4. 修改打包入口和出口

   • 根目录创建webpack.config.js配置文件

     const path = require('path');
     module.exports = {
         entry: './src/index.js',				// 入口文件
         output: {							   // 出口文件配置				
             path: path.resolve(__dirname, 'dist'),	// 输出路径
             filename: 'main.js'，				  // 输出文件
             clean: true							  // 生成打包前，清空输出目录
         }
     }

自动生成html文件

1. 安装：npm i html-webpack-plugin --save-dev

2. 配置：webpack.config.js文件

   const path = require('path');
   const HtmlWebpackPlugin = require('HtmlWebpackPlugin');		// 引入
   
   module.exports = {
       // 插件
       plugins: [
           // 实例化配置HtmlWebpackPlugin
           new HtmlWebpackPlugin({			
               template: path.resolve(__dirname, 'index.html'),		// 模板文件
               filename: path.resolve(__dirname, 'dist/index.html')	 // 输出文件
           })
       ]
   }

打包css代码

1. 安装：npm i css-loader mini-css-extract-plugin css-minimizer-webpack-plugin --save-dev

2. 在需要打包的js文件中引入CSS：import "./index.css"

3. 配置：webpack.config.js文件

   // 引入	
   const MiniCssExtractplugin = require('mini-css-extract-plugin');	// 提取css成单独文件
   const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');  // 压缩css代码
   
   module.exports = {
       plugins: [
           new MiniCssExtractplugin()		// 实例化提取
       ],   
       // 加载器
       module: {
           // 规则
           rules: [
               {
                   test: /\.css$/i,	  							  // 匹配css文件
                   use: [MiniCssExtractplugin.loader, "css-loader"]	// 使用加载器
               }
           ]
       },
       // 优化
       optimization: {
           // 极小化
           minimizer: [
               `...`,         					  // 保留js正常压缩
               new CssMinimizerWebpackPlugin()     // 实例css压缩
           ]
       }
   }

   ​

打包less代码

1. 步骤同6（打包css代码）多安装：npm i less less-loader --save-dev

2. 配置：webpack.config.js文件

   const path = require('path');
   const MiniCssExtractplugin = require('mini-css-extract-plugin');
   const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
   
   module.exports = {
       plugins: [
           new MiniCssExtractplugin()
       ],
       module: {
           rules: [
               //配置规则
               {
                   //匹配less文件
                   test: /\.less$/i,
                   // 使用对象加载器       
                   use: [MiniCssExtractplugin.loader, "css-loader", "less-loader"]
               }
           ]
       }
   }

打包图片

• 加载器webpack内置,无需下载

• 配置：webpack.config.js文件

  module.exports = {
      module: {
  	    rules: [
  	        // 配置规则
  	        {
  	            test: /\.(png|jpg|jpeg|gif)$/i,     // 匹配文件
  	            type: 'asset',                      // 资源类型
  	            generator: {
  	                // 文件输出[hash]:哈希命名  [ext]:保留拓展名  [qurey]:保留参数
  	                filename: 'assets/[hash][ext][query]'
  	            }
  	        }
  	    ]
  	}
  }

搭建开发环境

1. 安装：npm i webpack-dev-server --save-dev

2. 配置：webpack.config.js文件

   module.exports = {
       mode:'development',         // 设置开发模式（商用模式：production）
   }

3. 配置：package.json文件

   {
       "scripts": {
     		"dev":"webpack serve --open"
       }
   }

打包模式

• 基本使用：package.json

  {
      "scripts": {
      	"build": "webpack --mode=production",
      	"dev":"webpack serve --open --mode=development"
    	}
  }