diff --git a/二、技术文档/前端/webpack5通用配置.md b/二、技术文档/前端/webpack5通用配置.md deleted file mode 100644 index 7b9738a..0000000 --- a/二、技术文档/前端/webpack5通用配置.md +++ /dev/null @@ -1,228 +0,0 @@ -### 一、环境及依赖配置 - -#### 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