技术知识库/技术文档/前端/webpack5通用配置.md created

技术知识库/技术文档/前端/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/)
+<!--stackedit_data:
+eyJoaXN0b3J5IjpbMTM4NTI2NTc4Nl19
+-->