229 lines
6.6 KiB
Markdown
229 lines
6.6 KiB
Markdown
### 一、环境及依赖配置
|
||
|
||
#### 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:
|
||
eyJoaXN0b3J5IjpbMTM4NTI2NTc4Niw2MjcyODEzMjYsLTE3MT
|
||
UyODk2NDEsLTIxNDQ2ODQ3NDBdfQ==
|
||
--> |