1.0.14 • Published 9 months ago
@fch/webpack-bundle v1.0.14
使用指南
需要添加的 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",
},
1.0.14
9 months ago