Blame view

vue.config.js 5.57 KB
406803045 committed
1 2
'use strict'
const path = require('path')
3
const defaultSettings = require('./src/config/index.js')
宋楠 committed
4 5 6 7 8
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

const resolve = dir => path.join(__dirname, dir)
// page title
const name = defaultSettings.title || 'vue mobile template'
9
// 生产环境,测试和正式
宋楠 committed
10 11
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
// externals
sunnie committed
12 13 14 15 16 17 18
// const externals = {
//   vue: 'Vue',
//   'vue-router': 'VueRouter',
//   vuex: 'Vuex',
//   vant: 'vant',
//   axios: 'axios'
// }
宋楠 committed
19 20
// CDN外链,会插入到index.html中
// const cdn = {
sunnie committed
21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
//   // 开发环境
//   dev: {
//     css: [],
//     js: []
//   },
//   // 生产环境
//   build: {
//     css: ['https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.css'],
//     js: [
//       'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
//       'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
//       'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
//       'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
//       'https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js'
//     ]
//   }
宋楠 committed
37 38
// }

406803045 committed
39
module.exports = {
sunnie committed
40 41 42 43
  publicPath: './', // 署应用包时的基本 URL。 vue-router hash 模式使用
  //  publicPath: '/app/', //署应用包时的基本 URL。  vue-router history模式使用
  outputDir: 'dist', //  生产环境构建文件的目录
  assetsDir: 'static', //  outputDir的静态资源(js、css、img、fonts)目录
sunnie committed
44
  lintOnSave: !IS_PROD,
sunnie committed
45
  productionSourceMap: false, // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
406803045 committed
46
  devServer: {
sunnie committed
47 48
    port: 9020, // 端口
    open: false, // 启动后打开浏览器
406803045 committed
49
    overlay: {
sunnie committed
50
      //  当出现编译器错误或警告时,在浏览器中显示全屏覆盖层
406803045 committed
51 52
      warnings: false,
      errors: true
宋楠 committed
53
    }
sunnie committed
54 55 56 57
    // proxy: {
    //   //配置跨域
    //   '/api': {
    //       target: "https://test.xxx.com",
sunnie committed
58
    //       // ws:true,
sunnie committed
59 60 61 62 63 64
    //       changOrigin:true,
    //       pathRewrite:{
    //           '^/api':'/'
    //       }
    //   }
    // }
406803045 committed
65
  },
sunnie committed
66
  css: {
67
    extract: IS_PROD, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
sunnie committed
68 69 70 71 72 73
    sourceMap: false,
    loaderOptions: {
      scss: {
        // 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀
        // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
        prependData: `
宋楠 committed
74 75
          @import "assets/css/mixin.scss";
          @import "assets/css/variables.scss";
sunnie committed
76 77 78 79 80
          $cdn: "${defaultSettings.$cdn}";
          `
      }
    }
  },
81
  configureWebpack: config => {
宋楠 committed
82
    config.name = name
sunnie committed
83

84
    // 为生产环境修改配置...
sunnie committed
85 86 87
    // if (IS_PROD) {
    //   // externals
    //   config.externals = externals
宋楠 committed
88
    // }
89
  },
宋楠 committed
90 91

  chainWebpack: config => {
406803045 committed
92 93
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test
宋楠 committed
94 95

    // 别名 alias
96 97 98
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
宋楠 committed
99
      .set('api', resolve('src/api'))
100 101
      .set('views', resolve('src/views'))
      .set('components', resolve('src/components'))
sunnie committed
102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129

    /**
     * 添加CDN参数到htmlWebpackPlugin配置中
     */
    // config.plugin('html').tap(args => {
    //   if (IS_PROD) {
    //     args[0].cdn = cdn.build
    //   } else {
    //     args[0].cdn = cdn.dev
    //   }
    //   return args
    //  })

    /**
     * 设置保留空格
     */
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true
        return options
      })
      .end()
    /**
     * 打包分析
     */
宋楠 committed
130 131 132 133 134 135 136
    if (IS_PROD) {
      config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
        {
          analyzerMode: 'static'
        }
      ])
    }
sunnie committed
137 138 139
    config
      // https://webpack.js.org/configuration/devtool/#development
      .when(!IS_PROD, config => config.devtool('cheap-source-map'))
406803045 committed
140

sunnie committed
141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177
    config.when(IS_PROD, config => {
      config
        .plugin('ScriptExtHtmlWebpackPlugin')
        .after('html')
        .use('script-ext-html-webpack-plugin', [
          {
            // 将 runtime 作为内联引入不单独存在
            inline: /runtime\..*\.js$/
          }
        ])
        .end()
      config.optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
          // cacheGroups 下可以可以配置多个组,每个组根据test设置条件,符合test条件的模块
          commons: {
            name: 'chunk-commons',
            test: resolve('src/components'),
            minChunks: 3, //  被至少用三次以上打包分离
            priority: 5, // 优先级
            reuseExistingChunk: true // 表示是否使用已有的 chunk,如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了,那么将不会重新生成新的。
          },
          node_vendors: {
            name: 'chunk-libs',
            chunks: 'initial', // 只打包初始时依赖的第三方
            test: /[\\/]node_modules[\\/]/,
            priority: 10
          },
          vantUI: {
            name: 'chunk-vantUI', // 单独将 vantUI 拆包
            priority: 20, // 数字大权重到,满足多个 cacheGroups 的条件时候分到权重高的
            test: /[\\/]node_modules[\\/]_?vant(.*)/
          }
        }
      })
      config.optimization.runtimeChunk('single')
    })
406803045 committed
178 179
  }
}