knowledge/技术文档/前端/webpack5通用配置.md

一、环境及依赖配置

1.1、环境要求

Node版本要在10.13.0以上

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 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/