@fch/webpack-bundle

使用指南

需要添加的 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",
},