jy-docs/jydocs-mobile/vue.config.js

const merge = require('webpack-merge')
const tsImportPluginFactory = require('ts-import-plugin')
const autoprefixer = require('autoprefixer')
// const pxtorem = require('postcss-pxtorem')
const pxtoviewport = require('postcss-px-to-viewport')

const externals = {
  vue: 'Vue',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  axios: 'axios',
  'js-cookie': 'Cookies',
  vant: 'vant',
  moment: 'moment'
}

// cdn地址获取访问(国外): https://www.jsdelivr.com/
// cdn地址获取访问(国内): https://www.bootcdn.cn/

const cdn = {
  css: [
    // '//unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css'
  ],
  js: [
    '//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
    '//cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
    '//cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js',
    '//cdn.jsdelivr.net/npm/vant@2.8.2/lib/vant.min.js',
    '//cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
    '//cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js',
    '//cdn.jsdelivr.net/npm/moment@2.26.0/moment.min.js',
    // '//res.wx.qq.com/open/js/jweixin-1.6.0.js'
  ]
}

const s_version = process.env.npm_package_version.replace(/\./g, '')

module.exports = {
  publicPath: process.env.BASE_URL,
  parallel: false,
  productionSourceMap: false,
  outputDir: 'page_docs_app',
  devServer: {
    port: '8080',
    open: false,
    disableHostCheck: true,
    proxy: {
      '^/dev/api': {
        target: 'http://app207-jytest.jianyu360.cn',
        changeOrigin: true,
        logLevel: 'debug',
        pathRewrite: {
          '^/dev/api': ''
        }
      },
      '^/distribution': {
        target: 'http://app207-jytest.jianyu360.cn',
        changeOrigin: true,
        logLevel: 'debug',
        pathRewrite: {
          '^/distribution': '/distribution'
        }
      },
      '^/jydocs': {
        target: '192.168.20.180:821',
        changeOrigin: true,
        logLevel: 'debug',
        pathRewrite: {
          '^/jydocs': '/jydocs'
        }
      }
    }
  },
  css: {
    extract: {
      filename: 'css/[name].[contenthash:10].css?v=[contenthash:8]',
      chunkFilename: 'css/[name].[contenthash:10].css?v=[contenthash:8]'
    },
    loaderOptions: {
      sass: {
        prependData: '@import "@/style/_mixin.scss";@import "@/style/_variables.scss";' // 全局引入
      },
      postcss: {
        plugins: [
          autoprefixer(),
          pxtoviewport(({
            unitToConvert: 'px',
            viewportWidth: 375,
            unitPrecision: 5,
            propList: [
              '*'
            ],
            viewportUnit: 'vw',
            fontViewportUnit: 'vw',
            selectorBlackList: [],
            minPixelValue: 1,
            mediaQuery: false,
            replace: true,
            exclude: /(\/|\\)(node_modules)(\/|\\)/
          }))
        ]
      }
    }
  },
  chainWebpack: config => {
    // 防止多页面打包卡顿
    // eslint-disable-next-line no-unused-expressions
    // config.plugins.delete('named-chunks')

    if (process.env.NODE_ENV === 'production') {
      config.output
        .chunkFilename('js/[name].[contenthash:10].js?v=[contenthash:8]')
        .filename('js/[name].[contenthash:10].js?v=[contenthash:8]')

      // 打包时需要执行，开发环境运行不需要执行
      config.externals(externals)

      // 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中
      config.plugin('html').tap(args => {
        // https://github.com/DanielRuf/html-minifier-terser#options-quick-reference
        // 禁止html压缩去空行
        // args[0].minify.collapseWhitespace = false

        // html中添加cdn
        args[0].cdn = cdn
        args[0].version = s_version
        return args
      })
    } else {
      config.plugin('html').tap(args => {
        // html中添加wxjsssk的cdn
        args[0].cdn = {
          js: [
            cdn.js[cdn.js.length - 1]
          ]
        }
        return args
      })
    }

    // 分析静态资源
    if (process.env.use_analyzer) {
      config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }

    // 修复HMR
    config.resolve.symlinks(true)

    config.module
      .rule('ts')
      .use('ts-loader')
      .tap(options => {
        options = merge(options, {
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [
              tsImportPluginFactory({
                libraryName: 'vant',
                libraryDirectory: 'es',
                style: true
              })
            ]
          }),
          compilerOptions: {
            module: 'es2015'
          }
        })
        return options
      })
  }
}