From 04da1c5008f97945d3ca39a687dfa1a545b1bbb2 Mon Sep 17 00:00:00 2001 From: huangzhen Date: Fri, 1 Nov 2024 11:58:46 +0800 Subject: [PATCH] =?UTF-8?q?update=20@=E7=94=9F=E4=BA=A7=E5=8C=BA=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 17 ++++++----------- build/webpack.base.js | 20 +------------------- build/webpack.com.js | 3 ++- build/webpack.dev.js | 19 +++++++++++++++++++ build/webpack.prod.js | 17 +++++++++++++++++ package.json | 5 ++--- public/index.html | 8 ++++---- tsconfig.json | 3 ++- 8 files changed, 53 insertions(+), 39 deletions(-) diff --git a/README.md b/README.md index 059f08a..b2806cf 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # 营销系统 模版H5 ``` -### 默认 npm (pnpm 需要注释 webpack.base.js 配置 resolve-modules) +### 依赖包工具 默认 npm (pnpm 需要注释 webpack.base.js 配置 resolve-modules) npm install ``` ### 分支介绍 ``` -main 开发分支 - +test 测试分支 +main 生产分支 ``` ### 启动项目 @@ -15,12 +15,7 @@ main 开发分支 npm run start ``` -### 测试打包 -``` -npm run dev -``` - -### 生产打包（推荐） +### 测试/生产打包 ``` npm run build ``` @@ -35,8 +30,8 @@ npm run build 规范： 目录 /src/views/templates 命名 cmsXxxx -类组件开发 + 外部文件引入样式 (index.scss) -props.comType 1 H5 2 配置页(PC) +"类组件"开发 + 外部文件引入样式 (index.scss) +props.comType: 1 H5; 2 配置页(PC) cdn 引入图片 注意事项： diff --git a/build/webpack.base.js b/build/webpack.base.js index 201cd7d..98cd007 100644 --- a/build/webpack.base.js +++ b/build/webpack.base.js @@ -1,13 +1,11 @@ const path = require('path') const { VueLoaderPlugin } = require('vue-loader') const { DefinePlugin } = require('webpack'); -const TerserPlugin = require("terser-webpack-plugin"); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { VantResolver } = require('@vant/auto-import-resolver'); const AutoImport = require('unplugin-auto-import/webpack'); const Components = require('unplugin-vue-components/webpack'); -const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); module.exports = { entry: path.join(__dirname, '../src/main.ts'), // 入口文件 @@ -82,27 +80,11 @@ module.exports = { dts: path.resolve(__dirname, "../src/components.d.ts"), }), ], - optimization: { - minimize: true, - minimizer: [ - new TerserPlugin({ - terserOptions: { - compress: { - // drop_console: true, // 移除所有的`console`语句 - }, - output: { - comments: false, // 去掉注释 - }, - }, - extractComments: false, // 不从代码中提取注释 - }), - new CssMinimizerPlugin(), - ], - }, resolve: { // 如果用的是pnpm 不要配置这个，会有幽灵依赖的问题，访问不到很多模块 // 查找第三方模块只在本项目的node_modules中查找 modules: [path.resolve(__dirname, '../node_modules')], + extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'], alias: { '@': path.join(__dirname, '../src') diff --git a/build/webpack.com.js b/build/webpack.com.js index 44bb0e3..57ed9ba 100644 --- a/build/webpack.com.js +++ b/build/webpack.com.js @@ -58,7 +58,7 @@ module.exports = { new TerserPlugin({ terserOptions: { compress: { - // drop_console: true, // 移除所有的`console`语句 + drop_console: true, // 移除所有的`console`语句 }, output: { comments: false, // 去掉注释 @@ -72,6 +72,7 @@ module.exports = { // 如果用的是pnpm 不要配置这个，会有幽灵依赖的问题，访问不到很多模块 // 查找第三方模块只在本项目的node_modules中查找 modules: [path.resolve(__dirname, '../node_modules')], + extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'], alias: { '@': path.join(__dirname, '../src') diff --git a/build/webpack.dev.js b/build/webpack.dev.js index 8cbcb0d..854313a 100644 --- a/build/webpack.dev.js +++ b/build/webpack.dev.js @@ -1,5 +1,7 @@ const { merge } = require('webpack-merge') const baseConfig = require('./webpack.base.js') +const TerserPlugin = require("terser-webpack-plugin"); +const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); // const VITE_BASE_URL = 'http://192.168.110.126:8099'; // 樊波 const VITE_BASE_URL = 'http://120.55.12.245:8098'; // 测试-公网 @@ -9,6 +11,23 @@ const VITE_BASE_URL = 'http://120.55.12.245:8098'; // 测试-公网 module.exports = merge(baseConfig, { mode: 'development', // 开发模式,打包更加快速,省了代码优化步骤 devtool: 'eval-cheap-module-source-map', // 源码调试模式 + optimization: { + minimize: true, + minimizer: [ + new TerserPlugin({ + terserOptions: { + compress: { + // drop_console: true, // 移除所有的`console`语句 + }, + output: { + // comments: false, // 去掉注释 + }, + }, + // extractComments: false, // 不从代码中提取注释 + }), + new CssMinimizerPlugin(), + ], + }, devServer: { port: 8888, // 服务端口号 compress: false, // gzip压缩,开发环境不开启,提升热更新速度 diff --git a/build/webpack.prod.js b/build/webpack.prod.js index 653adf1..f2b350d 100644 --- a/build/webpack.prod.js +++ b/build/webpack.prod.js @@ -2,6 +2,8 @@ const { merge } = require('webpack-merge') const baseConfig = require('./webpack.base.js') const CompressionPlugin = require("compression-webpack-plugin"); const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); +const TerserPlugin = require("terser-webpack-plugin"); +const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); module.exports = merge(baseConfig, { mode: 'production', // 生产模式,会开启 tree-shaking 和 压缩代码，以及其他优化 @@ -20,6 +22,21 @@ module.exports = merge(baseConfig, { }), ], optimization: { + minimize: true, + minimizer: [ + new TerserPlugin({ + terserOptions: { + compress: { + drop_console: true, // 移除所有的`console`语句 + }, + output: { + comments: false, // 去掉注释 + }, + }, + extractComments: false, // 不从代码中提取注释 + }), + new CssMinimizerPlugin(), + ], splitChunks: { // 分隔代码 cacheGroups: { vendors: { // 提取node_modules 代码 diff --git a/package.json b/package.json index 1df1f48..2866efe 100644 --- a/package.json +++ b/package.json @@ -4,9 +4,8 @@ "private": true, "scripts": { "start": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.js", - "dev": "cross-env NODE_ENV=development webpack --config build/webpack.dev.js", - "com": "cross-env NODE_ENV=production webpack --config build/webpack.com.js", - "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.js" + "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.js", + "com": "cross-env NODE_ENV=production webpack --config build/webpack.com.js" }, "dependencies": { "axios": "^1.7.5", diff --git a/public/index.html b/public/index.html index 9337799..b737e79 100644 --- a/public/index.html +++ b/public/index.html @@ -14,12 +14,12 @@
-
-
+ - + diff --git a/tsconfig.json b/tsconfig.json index ed95614..ff836b4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -34,7 +34,8 @@ "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", - "tests/**/*.tsx" + "tests/**/*.tsx", + "auto-imports.d.ts" ], "exclude": [ "node_modules"