Blame view

vue.config.js 5.58 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
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
sunnie committed
11

宋楠 committed
12
// externals
sunnie committed
13 14 15 16 17 18 19
// const externals = {
//   vue: 'Vue',
//   'vue-router': 'VueRouter',
//   vuex: 'Vuex',
//   vant: 'vant',
//   axios: 'axios'
// }
宋楠 committed
20 21
// CDN外链,会插入到index.html中
// const cdn = {
sunnie committed
22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
//   // 开发环境
//   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
38 39
// }

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

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

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

    // 别名 alias
97 98 99
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
宋楠 committed
100
      .set('api', resolve('src/api'))
101 102
      .set('views', resolve('src/views'))
      .set('components', resolve('src/components'))
sunnie committed
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 130

    /**
     * 添加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
131 132 133 134 135 136 137
    if (IS_PROD) {
      config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
        {
          analyzerMode: 'static'
        }
      ])
    }
sunnie committed
138 139 140
    config
      // https://webpack.js.org/configuration/devtool/#development
      .when(!IS_PROD, config => config.devtool('cheap-source-map'))
406803045 committed
141

sunnie committed
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 178
    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
179 180
  }
}