webpack_react_wei

webpack_react_wei 是一个简单易用的命令行项目构建工具，集成了webpackv5.89.0, 提供开发环境、构建打包、本地启动服务、环境配置、代理配置等功能。

支持 Web 项目，也支持 electron 项目

注意：Node 版本 >= 14.0+

项目启用了Tree Shaking技术优化，该技术依赖于静态分析，避免使用动态导入语法，因为它无法在编译时进行静态分析，推荐使用ES6模块化规范来组织你的JavaScript代码。

项目启用了CSS Modules。根据文件名自动启用 CSS 模块或 ICSS（Interoperable CSS）。以 .module.css 或 .module.scss 结尾这种格式会被视为启用css模块。

该工具默认是用于react项目，所以关于react相关的babel 、热更新等都已配置好了。项目中可以直接使用react。

安装：

npm install webpack_react_wei

Web 项目用法如下：

打开命令行窗口，进入项目根目录，输入如下命令：

wpack  // 判断是否安装成功，成功会有对应的描述信息
wpack run start // 启动开发环境 spa
wpack run build // 打包项目 spa
wpack start [dir] //  [dir] src下的目录名称,以src下[dir]目录作为开发环境启动目录
wpack build [dir] //  打包[dir]目录

项目的目录结构如下：（项目需要自己创建）

app // 项目名称
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html        // 必须
├── src
│   ├── demo
│   │   └── index.js      // wpack start demo 启动时，必须有这个入口文件index.js
│   ├── demo2
│   │   └── index.js
│   ├── index.js          // wpack run start 启动时，必须有这个入口文件index.js
│   ├── index.module.scss // css模块
│   └── styles
│       ├── base.scss     // 支持sass
│       └── index.scss
└── wPack.config.js  //当需要配置代理时，通过该文件配置

命令使用方式:

如果是全局安装的 npm i webpack_react_wei -g

》可以在命令行窗口直接输入 wpack start dir || wpack build dir|| wpack run start || wpack run build

如果是在项目下安装的 npm i webpack_react_wei

》请在package.json中配置

{
  "scripts": {
    "start": "wpack run start", // spa 开发环境启动
    "build": "wpack run build"  // spa 生产环境打包
  },
}

配置代理：

项目根路径下创建文件 wPack.config.js

module.exports = {
  proxy: {
    '/api': {
      target: 'http://localhost:3001',
      pathRewrite: { '^/api': '' },
      changeOrigin: true,
      secure: false,
    },
  },
}
// proxy的用法同webpack中devserver下的proxy,
// 可参考 https://webpack.js.org/configuration/dev-server/#devserverproxy

主要包含的功能如下：

js方面：

• 支持最新es6、es7语法、支持jsx语法
• 支持代码分割：对 node_modules 下的包做了单独提取
• 支持 tree Shaking
• 代码压缩
• 持久化缓存。(node_modules/.cache/webpack/xm)
• 开发环境支持HMR热更新

css方面：

• 支持 sass、支持 less
• 支持 css模块化。（局部作用域、自动生成唯一类名、模块化组织，建议使用css modules）。
• 支持最新css特性、自动添加厂商前缀
• css提取为一个单独的文件
• 代码压缩
• 开发环境支持HMR热更新

支持spa应用

使用命令 wpack run start 开发环境启动

使用命令wpack run build 生产环境打包

前提是目录结构中需保证 src目录下存在index.js文件

支持mpa下的spa应用

使用命令 wpack start dir 启动对应的src下的目录文件，前提是该[dir]目录下存在index.js入口文件

使用命令 wpack build dir 打包对应的src下的目录文件，前提是该[dir]目录下存在index.js入口文件

注意：通过 wpack build dir 打包的项目，以文件名作为打包名称，如：

wpack build react_demo

打包的结果如下，项目跟目录下会生成一个dist文件

dist
└── react_demo
    ├── index.html
    └── static
        ├── assets // 图片字体等资源文件
        ├── css
        └── js

打包成mpa下的spa应用的项目后，怎么配置服务器？

以nginx为例：

 // 生成的dist包目录结构为
// |__dist
//   |__mall
//   |__book
// ...省略
  server {
        location / {
            root   /usr/local/web/dist; // 生成的dist包存放的位置，改成自己存放dist的位置
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
// ...省略
    }

// 启动nginx后在浏览器中访问
http://localhost:80/mall  // mall页面
http://localhost:80/book  // book页面

在 Mac 电脑上使用 Nginx 搭建一个本地的 Web 服务器:

• 安装 Homebrew /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
• 安装 Nginx：在 Terminal 中执行以下命令进行安装： brew install nginx 启动 Nginx：在 Terminal 中执行以下命令启动 Nginx： sudo nginx

在国内由于网络环境的限制，使用 Homebrew 安装 Nginx 可能会遇到很多问题。可以尝试以下方法来安装 Nginx

1. 使用 Homebrew 国内镜像安装例如：

# 替换 brew.git:
cd "$(brew --repo)"
git remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git

# 替换 homebrew-core.git:
cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
git remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-core.git

# 更新并安装 Nginx：
brew update
brew install nginx

2. 手动编译安装如下：

• 下载 Nginx 源码：您可以从 Nginx 的官方网站（http://nginx.org/en/download.html）下载最新版本的源码包。
• 解压源码：将下载的源码包解压到您选择的目录中。
• 编译：进入源码目录，执行以下命令进行编译：

./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-http_v2_module
make
sudo make install

这里的 --prefix 参数指定了 Nginx 的安装目录，--with-http_ssl_module 和 --with-http_v2_module 参数启用了 SSL 和 HTTP/2 模块。 启动 Nginx：执行以下命令来启动 Nginx

sudo /usr/local/nginx/sbin/nginx

Electron 项目用法如下：

项目的目录结构如下：（项目需要自己创建）

app // 项目名称
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html        // 必须
├── src
│   ├── main             // 主进程文件目录
│   │   ├── index.js     // 主进程入口文件      必须
│   │   └── preload.js   // 预加载preload文件 必须
│   ├── renderer         // 渲染进程文件夹   文件名可以自己取
│   │   └── index.jsx     
│   └── index.js         // wpack renderer:run start 启动时，必须有这个入口文件index.js

package.json 配置如下：

{
  // ... 其他配置忽略
 "scripts": { 
   // 启动主进程，可以使用自己的热加载方式，如："electron": "electronmon src/main"
   "electron": "electron .",
   "build:main": "wpack electron main", // 打包主进程
   "build:renderer": "wpack electron main", // 打包渲染进程
   "start": "wpack renderer:run start", // 开发环境启动命令，启动后会自动运行npm run electron
   // 使用 concurrently 可以同时运行这两个命令，而不必等待一个命令执行完毕后再执行另一个命令。
   // 如果不想安装concurrently，就使用 "build": "npm run build:main && npm run build:renderer"
   "build": "concurrently \"npm run build:main\" \"npm run build:renderer\"",
   "electron:build": "electron-builder build", // 打包项目，这个可以自行配置，和本工具包无关
 },
  // 打包项目配置，供参考
  "build": {
    "appId": "com.xmj.xxxx",
    "productName": "xxxx",
    "files": [
      "./dist"
    ],
    "extends": null,
    "directories": {
      "buildResources": "assets",
      "output": "release"
    },
    "extraMetadata": {
      "main": "./dist/main/main.js"
    },
    "asarUnpack": [
      "node_modules"
    ],
    "win": {
      "target": [
        "nsis",
        "msi"
      ]
    },
    "mac": {
      "target": "dmg"
    },
    "linux": {
      "target": "deb"
    }
  },
}

开发环境下开发只需要运行 npm run start

生产环境打包只需要运行 npm run build

打包后的目录结构如下：

dist // dist 目录
├── main
│   ├── main.js
│   ├── main.js.LICENSE.txt
│   ├── preload.js
│   └── preload.js.LICENSE.txt
└── renderer
    ├── index.html
    └── static
        ├── assets
        ├── css
        └── js

如果想本地运行打包后的项目可以在package.json中的script添加配置：

"start-main": "electron ./dist/main/main.js",

然后运行 npm run start-main 即可。

BrowserWindow加载页面的方式：

示例：

// 自己封装的一个简单页面加载的方法
const loadHTML = (window, htmlFileName) => {
  console.log("process.env.NODE_ENV:", process.env.NODE_ENV) // development | production
  console.log("process.env.PORT:", process.env.PORT)  // 端口号
  if (process.env.NODE_ENV === 'development') {
    const port = process.env.PORT;
    window.loadURL(`http://localhost:${port}/${htmlFileName}`);
  } else {    	window.loadURL(`file://${path.resolve(__dirname,'../renderer/index.html')}${htmlFileName}`);
  }
}

const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    icon: './../../public/icon.png',
    webPreferences: {
      nodeIntegration: true, // 赋予此窗口页面中的JavaScript访问Node.js环境的能力
      webSecurity: false, // 禁用 web 安全策略
      preload: path.join(__dirname, 'preload.js'),
      enableRemoteModule: true, // 允許在 Render Process 使用 Remote Module
    },
  })

loadHTML(mainWindow);
// React 路由建议使用HashRouter 这样窗口加载路由页面可以这么写：
// 加载欢迎页面
// loadHTML(mainWindow, '#/welcome');