vue cli3/4 vue.config.js配置详解

vue.config.js 创建的时候没有，需要手动创建

const path = require('path');// 处理路径
const webpack = require('webpack');
const UglifyPlugin = require('uglifyjs-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");
// const PurgeCssWebpackPlugin = require("purgecss-webpack-plugin"); // 主要的作用删除无意义的css，只能配合 mini-css-extract-plugin
// const glob = require("glob"); // 主要功能就是查找匹配的文件,配合PurgeCssWebpackPlugin
const {
   
  BundleAnalyzerPlugin
} = require('webpack-bundle-analyzer');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //压缩css插件
//const AddCdnPlguin = require("add-asset-html-cdn-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin')
//const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin');
// const smw = new SpeedMeasureWebpackPlugin();
let {
   
  version,
  openGizp
} = require('./package.json'); //版本号和是否开启压缩
const production = process.env.NODE_ENV != 'development';
let buildReport = process.env.npm_lifecycle_event.includes('build:report'); //是否显示打包分析界面
// const ExtractTextPlugin = require('extract-text-webpack-plugin');
// var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
function resolve(dir) {
   
  return path.join(__dirname, dir) //此处使用path.resolve 或path.join 可自行调整
}
module.exports = {
   
  // 基本路径
  publicPath: production ? '' : '/',
  // devtool: production ? 'none' : 'source-map',
  // 输出文件目录
  outputDir: 'dist',
  assetsDir: './', //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  indexPath: 'index.html', //指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  //   pages: {
   
  //     index: {
   
  //         entry: 'src/main.js', // page 的入口
  //         template: 'public/index.html', // 模板来源
  //         filename: 'index.html', // 在 dist/index.html 的输出 
  //         title: 'Index Page', // 当使用 title 选项时，template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
  //         chunks: ['chunk-vendors', 'chunk-common', 'index'] // 在这个页面中包含的块，默认情况下会包含 // 提取出来的通用 chunk 和 vendor chunk。
  //     }
  //     //subpage: 'src/main.js' //不太理解
  //     // 当使用只有入口的字符串格式时，
  //     // 模板会被推导为 `public/subpage.html`
  //     // 并且如果找不到的话，就回退到 `public/index.html`。
  //     // 输出文件名会被推导为 `subpage.html`。

  // },
  lintOnSave: false,//设置是否在开发环境下每次保存代码时都启用 eslint验证
  css: {
   
    loaderOptions: {
   
      //配置全局scss变量或者mixin....
      sass: {
   
        //老版本是data，新版本是prependData
        prependData: `@import "@/style/global.scss";`,