diff --git a/技术知识库/一、技术文档/前端/webpack5通用配置.md b/技术知识库/一、技术文档/前端/webpack5通用配置.md new file mode 100644 index 0000000..7b9738a --- /dev/null +++ b/技术知识库/一、技术文档/前端/webpack5通用配置.md @@ -0,0 +1,228 @@ +### 一、环境及依赖配置 + +#### 1.1、环境要求 + +Node版本要在10.13.0以上1444 + +#### 1.2、基础依赖 +``` +-- 安装webpack所需依赖 +npm i webpack webpack-cli webpack-dev-server --save + +-- 安装自动生成html依赖 +npm i html-webpack-plugin html-loader clean-webpack-plugin --save-dev + +-- 安装css/字体图表处理依赖 +npm i css-loader style-loader sass sass-loader mini-css-extract-plugin --save + +-- 如果有scss则还需引入 +npm i sass sass-loader --save + +-- 如果有less则还需引入 +npm i less less-loader --save + +-- 为不同内核的浏览器加上CSS前缀 +npm install postcss-loader autoprefixer --save + +-- 图片及字体处理 +npm i url-loader file-loader --save + +-- 合并配置 +npm i webpack-merge --save-dev +``` +说明：这里只是一些基础依赖，如果有其他优化调整额外需要引入依赖的话，需要查看一下是否与webpack5是否兼容。 +### 二、配置 + +#### 2.1、通用配置webpack.base.js + +```const path = require('path') +const HtmlWebpackPlugin = require('html-webpack-plugin') +const MiniCssPlugin = require('mini-css-extract-plugin') +const VueLoaderPlugin = require('vue-loader/lib/plugin') + +const webpack = require('webpack') + +const name = 'ecrm-front' + +module.exports = { + // 使用回调函数。或者直接返回对象。 + optimization: { + nodeEnv: false + }, + target: 'web', + entry: path.resolve(__dirname, './src/main.js'), + output: { + crossOriginLoading: 'anonymous', + path: path.resolve(__dirname, 'dist'), + publicPath: `/${name}`, + library: `${name}-[name]`, + libraryTarget: 'umd', + chunkLoadingGlobal: `webpackJson_${name}`, + filename: 'js/[name]_[hash:8].js', + clean: true + }, + plugins: [ + new HtmlWebpackPlugin({ + template: './public/index.html', + publicPath: `/${name}/` + }), + new MiniCssPlugin({ + filename: 'css/bundle.css' + }), + new VueLoaderPlugin(), + new webpack.ProvidePlugin({ + Path: ['path'], + process: 'process/browser' + }) + ], + module: { + rules: [ + { test: /\.vue$/, loader: 'vue-loader' }, + { test: /\.js$/, loader: 'babel-loader', exclude: /node_module/ }, + { test: /\.css$/, use: [MiniCssPlugin.loader, 'css-loader', 'postcss-loader'] }, + { + test: /\.scss$/, + use: [ + { + loader: MiniCssPlugin.loader, + options: { publicPath: '..' } + }, + 'css-loader', + 'postcss-loader', + 'sass-loader' + ], + generator: { + filename: './scss/[name]_[hash].[ext]' + } + }, + { + test: /\.svg$/, + loader: 'svg-sprite-loader', + include: [path.resolve(__dirname, 'src/assets/icons/svg')], + options: { + symbolId: 'icon-[name]' + } + }, + { + test: /\.jpg$/, + type: 'asset', + parser: { + dataUrlCondition: { + maxSize: 4 * 1024 * 1024 // 4M + } + } + }, + { + test: /\.gif$/, + type: 'asset', + parser: { + dataUrlCondition: { + maxSize: 4 * 1024 * 1024 // 4M + } + } + }, + { + test: /\.png$/, + type: 'asset/resource', + // 打包后的静态资源位置 及 文件名 + // generator: { + // filename: './image/[hash].[ext]' + // }, + parser: { + dataUrlCondition: { + maxSize: 1024 * 1024 + } + } + }, + { test: /\.html$/, loader: 'html-loader' }, + { + test: /\.wav$/, + loader: 'url-loader', + options: { + name: 'audios/[name].[ext]', + limit: 10 + } + } + ] + }, + resolve: { + // https://github.com/babel/babel/issues/8462 + // https://blog.csdn.net/qq_39807732/article/details/110089893 + // 如果确认需要node polyfill，设置resolve.fallback安装对应的依赖 + // webpack5 关闭node功能 要自己导入 + fallback: { + }, + alias: { + '@': path.resolve(__dirname, './src') + }, + extensions: ['.json', '.js', '.vue'] + }, + // 关闭性能提示 + performance: { + hints: false + } +} +``` +#### 2.2、出口配置文件，例如webpack.gray.js +``` +const { merge } = require('webpack-merge') + +const path = require('path') +const webpack = require('webpack') +const baseConfig = require('./webpack.base.js') + +const name = 'ecrm-front' + +const grayConfig = { + // 使用回调函数。或者直接返回对象。 + mode: 'production', + devServer: { + open: false, + port: 80, + hot: true, + static: path.resolve(__dirname, 'dist') // 网站的根目录为 根目录/dist，如果配置不对，会报Cannot GET /错误 + }, + plugins: [ + new webpack.DefinePlugin({ + 'process.env': { + // 定义环境和变量 + NODE_ENV: JSON.stringify('production'), + VUE_APP_CURRENTMODE: JSON.stringify('gray'), + // 访问地址 + VUE_APP_ROOTURL: JSON.stringify(`http://192.168.21.31/${name}`), + // CRM web接口前缀 + VUE_APP_CTX: JSON.stringify('http://192.168.21.31/ecrm-web'), + // 系统管理接口前缀 + VUE_APP_SSOURL: JSON.stringify('http://192.168.21.31/usm-api'), + // 报表地址前缀 + VUE_APP_REPORTURL: JSON.stringify('http://app.vazyme.cn/fms-report'), + // BI地址前缀 + VUE_APP_BIURL: JSON.stringify('https://app.vazyme.cn/fms-finebi'), + // CRM render接口前缀 + VUE_APP_CRMRENDERURL: JSON.stringify('http://192.168.21.31/ecrm-render'), + // 附件上传接口前缀 + VUE_APP_FILEURL: JSON.stringify('http://192.168.21.31/doc-cloud-oss'), + // CRM follow接口前置 + VUE_APP_COMPLIANCEURL: JSON.stringify('http://192.168.21.31/ecrm-follow'), + // CRM visit接口前缀 + VUE_APP_VISIT_CTX: JSON.stringify('http://192.168.21.31/ecrm-visit'), + // CRM export接口前缀 + VUE_APP_EXPORT_CTX: JSON.stringify('http://192.168.21.31/ecrm-export'), + // CRM 移动端访问地址 + VUE_APP_ROOTURL_MOBILE: JSON.stringify('http://192.168.21.31/ecrm-mfront/'), + // CRM 打印工程接口前置 + VUE_APP_PRINT: JSON.stringify('http://192.168.21.31/ecrm-print'), + // 网关注销接口 + VUE_APP_GATEWAYURL: JSON.stringify('http://192.168.21.31/sso-service'), + // 基座应用 + MAIN_ROOT: JSON.stringify('http://192.168.21.31/home') + } + }) + ] +} +module.exports = merge(baseConfig, grayConfig) +``` +其他还有什么优化配置的可以去webpack中文网站了解一下：[https://webpack.docschina.org/concepts/](https://webpack.docschina.org/concepts/) + \ No newline at end of file