前端基础:node.js、npm、webpack

Current Node.js (/Users/javaedge/.nvm/versions/node/v16.20.2/bin/node) version is v16.20.2, please upgrade to 20.6.0 or higher for better compatibility.

npx create-react-app my-app
npm run dev
pnpm install

node -v
v14.14.0

npm init

+----------+     +-----------+     +-------------+
|  npm init |---->| 输入参数  |---->| package.json |
+----------+     +-----------+     +-------------+

sudo npm install -g webpack

$ sudo npm install -g webpack
Password:
/usr/local/bin/webpack -> /usr/local/lib/node_modules/webpack/bin/webpack.js
+ webpack@5.16.0
added 79 packages from 124 contributors in 4.342s

$ npm install webpack@1.15.0 --save-dev
$ webpack -v

webpack --config webpack.prod.js    # 生产配置
webpack --config webpack.dev.js     # 开发配置

webpack -c my.webpack.config.js

webpack-dev-server

npm install webpack-dev-server一save-dev

webpack-dev-server/client?http://localhost:8088

webpack-dev-server --port 8088 --inline

webpack-dev-server --contentbase -src --inline --hot(热加载启动命令)

$ webpack-dev-server
# 静态文件根目录为 src（注意：-src 可能是笔误，应为 --content-base src）
--contentbase -src
# 将客户端脚本内联到页面中
--inline
# 启用热模块替换（HMR）
--hot
# 访问地址
http://localhost:8080/

webpack result is served from /
content is served from /Users/apple/WebstormProjects/sourcecode/05-03
Hash: 6b37863c2518ec609626
Version: webpack 1.13.2
Time: 1175ms

# 输出文件 文件大小：2.55 MB（未压缩） 构建时间
Asset       Size     Chunks             Chunk Names
./src/bundle.js   2.55 MB   0  [emitted]    main
chunk {0} ./src/bundle.js (main) 918 kB [rendered]

// 核心构建工具
var webpack           = require('webpack');
// 将 CSS 提取到独立文件中（已废弃，现代项目用 mini-css-extract-plugin）
var ExtractTextPlugin = require('extract-text-webpack-plugin');
// 自动生成 HTML 文件，并注入 <script> 和 <link> 标签
var HtmlWebpackPlugin = require('html-webpack-plugin');

// 环境变量配置, dev / online   通过命令行传参控制环境，如npm run build -- --WEBPACK_ENV=online
var WEBPACK_ENV       = process.env.WEBPACK_ENV || 'dev';

// 获取 html-webpack-plugin 参数的方法  动态生成HTML配置函数
var getHtmlConfig = function(name, title){
    return {
        template   : './view/' + name + '.html',
        filename   : './view/' + name + '.html',
        favicon    : './favicon.ico', // see!!!
        title      : title,
        inject     : true,
        hash       : true,
        chunks     : ['./common', name]
    };
};

// webpack config
var config = {
    entry: {
        'common'            : ['./src/page/common/index.js'],
        'index'             : ['./src/page/index/index.js'],
        'list'              : ['./src/page/list/index.js'],
        'detail'            : ['./src/page/detail/index.js'],
        'cart'              : ['./src/page/cart/index.js'],
        'user-login'        : ['./src/page/user-login/index.js'],
        'user-register'     : ['./src/page/user-register/index.js'],
        'user-pass-reset'   : ['./src/page/user-pass-reset/index.js'],
        'user-center'       : ['./src/page/user-center/index.js'],
        'user-center-update': ['./src/page/user-center-update/index.js'],
        'user-pass-update'  : ['./src/page/user-pass-update/index.js'],
        'result'            : ['./src/page/result/index.js'],
        'about'             : ['./src/page/about/index.js']
    },
    output: {
        path        : __dirname + '/dist/',
        publicPath  : 'dev' === WEBPACK_ENV ? '/dist/' : '//s.shishusheng.com/mmall-fe/dist/',
        filename    : 'js/[name].js'
    }
};

<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="keywords" content="二手书,电商">
<meta name="description" content="二手书电商平台">

<link rel="dns-prefetch" href="//cdn.bootcss.com">
<link rel="dns-prefetch" href="//s.javaedge.com">
<link rel="dns-prefetch" href="//img.javaedge.com">

<link rel="dns-prefetch" href="//cdn.bootcss.com">

<link rel="preconnect" href="//cdn.bootcss.com">

{
  "status": 0, // 接口状态，0成功、1失败、10未登录
  "data": {    // 接口数据
    "id": 2,
    "name": "oppo R8"
  }
}

{
  "status": 1,
  "msg": "该商品已下架或删除"
}

// 前端处理逻辑示例（JavaScript）
fetch('/api/product/2')
  .then(res => res.json())
  .then(data => {
    if (data.status === 0) {
      console.log('商品名称:', data.data.name);
    } else if (data.status === 1) {
      alert(data.msg); // 弹出错误信息
    } else if (data.status === 10) {
      window.location.href = '/login'; // 跳转登录页
    }
  });

+--------+     +--------+     +--------+     +----------+
| URL解析 |---->| DNS查询 |---->| 资源请求 |---->| 浏览器解析 |
+--------+     +--------+     +--------+     +----------+

http://        www.javaedge.com:80       /get_data.do      ?productld=1      #title
  ↑               ↑                         ↑                   ↑                  ↑
 协议           域名+端口                 路径                参数               哈希

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="dns-prefetch" href="//cdn.bootcss.com">
    <link rel="dns-prefetch" href="//s.javaedge.com">
    <link rel="dns-prefetch" href="//img.javaedge.com">
    <title></title>
</head>

Set-Cookie: session_id=abc123; user_id=456; expires=Wed, 01 Jan 2025 00:00:00 GMT; path=/; domain=.example.com

> document.cookie
< "Hm_lvt_bc210cd22928076d28296716d9dfcf01=1526105745; Hm_lpv_t_bc210cd22928076d28296716d9dfcf01=1527049716"

// 添加
window.localStorage.setItem('name', 'sss');

// 查看
window.localStorage.getItem('name');

// 删除
window.localStorage.removeItem('name');