使用指南

需要添加的 process.env 变量

enviroment/* 中添加变量

| 变量名 | 含义 | 可选变量 | | ---------------------- | ---------------------------------------------------------------- | --------------------------------------------------------- | | NODE_ENV | 当前的运行环境（需在命令行标记，作为变量初始化依据） | production or development | | CSS_TYPE | 当前是 css 类型(必填) | less or css | | TYPE | 当前运行状态(需在命令行标记) | start or build 默认 start | | TEMPLATE_TYPE | 当前模版类型（必填） | H5 or Web | | REACT_VERSION | 当前 react 版本 | 18.2.0 or 17.0.1 or 16.14.0 默认 18.2.0 | | WBPACK_DEV_SERVER_HOST | dev 启动的 host 地址 | 默认 localhost | | WBPACK_DEV_SERVER_PORT | dev 启动的 post 端口 | 默认 8080 | | PUBLICK_PATH | 公用路径一般用于解决上线二级目录的问题 | | | SITE_TITLE | 在 HtmlWebpackPlugin 中填充的 title 变量 用于网站名和 title 显示 | | | IS_TAILWINDCSS | 在需要使用 tailwindcss 的时候启用 | 默认俄为 undefined 也就是不开启 设为 true 启用 false 关闭 |

使用说明

该 npm 库只提供默认的 webpack 配置，无需安装任何 webpack 相关的库

该库导出了 | 属性名 | 含义 | | ---- | ---- | | webpackConfig | 封装的 webpack 配置 | | webpack | require('webpack')后 导出的 webpack 对象 | | WebpackDevServer | require('webpack-dev-server')后 导出的 WebpackDevServer 对象 | | webpackMerge | require('webpack-merge') 后导出的 webpackMerge |

使用方式如下（认真阅读）

添加 dev 启动方式

新建 run/start.js 文件 添加以下代码

const { webpack, WebpackDevServer, webpackConfig } = require('@fch/webpack-bundle');

const compiler = webpack(webpackConfig);
const devServerOptions = { ...webpackConfig.devServer, open: true };
const server = new WebpackDevServer(devServerOptions, compiler);

const runServer = async () => {
  await server.start();
};

runServer();

然后在 package.json 中添加

"start": "rimraf dist && cross-env NODE_ENV=development node ./run/start.js",

添加 build 启动方式

新建 run/build.js 文件 添加以下代码

const { webpack, webpackConfig } = require('@fch/webpack-bundle');
const compiler = webpack(webpackConfig);
compiler.run();

然后在 package.json 中添加

"build-dev": "rimraf dist && cross-env NODE_ENV=development TYPE=build node ./run/build.js",
"build": "rimraf dist && cross-env NODE_ENV=production node ./run/build.js",

如果需要修改更改更多 默认配置 参考 webpack-merge 如果需要修改现在已经存在的 plugins 等属性 现在存在的 plugin

• Dotenv
• ReactRefreshPlugin
• ESLintWebpackPlugin
• WebpackBarPlugin
• FriendlyErrorsWebpackPlugin
• IgnorePlugin
• WebpackCdnPlugin
• HtmlWebpackPlugin

这是修改 webpack 配置的方法，需要配合上面的 相关信息

const { webpackConfig } = require('@fch/webpack-bundle');
const isProd = process.env.NODE_ENV == 'production';
const path = require('path');
const fs = require('fs');
let loading = {
  html: fs.readFileSync(path.join(process.cwd(), './public/loading.html')),
  css: '<style>' + fs.readFileSync(path.join(process.cwd(), './public/loading.css')) + '</style>',
};

webpackConfig.plugins.map((item) => {
  if (item.constructor.name == 'HtmlWebpackPlugin') {
    item.userOptions = {
      template: path.resolve(process.cwd(), `./public/${isProd ? 'index.html' : 'index.dev.html'}`),
      title: process.env.SITE_TITLE,
      loading,
    };
  }

  return item;
});

module.exports = webpackConfig;

webpack 推荐配置如下 fch.webpack.config.js 为别名可默认使用 webpack.config.js

"scripts": {
    "start": "rimraf dist && cross-env NODE_ENV=development node ./run/start.js",
    "build": "rimraf dist && cross-env NODE_ENV=production node ./run/build.js",
    "build-dev": "rimraf dist && cross-env NODE_ENV=development TYPE=build node ./run/build.js",
},