vue2的vue.config文件

const path = require("path");

function resolve(dir) {

  return path.join(__dirname, dir);

}

// 是否为生产环境

const isProduction = process.env.NODE_ENV !== "development";

// 本地环境是否需要使用cdn

const devNeedCdn = false;

// cdn链接

const cdn = {

  // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）

  externals: {

    vue: "Vue",

    vuex: "Vuex",

    "vue-router": "VueRouter"

  },

  // cdn的css链接

  css: [],

  // cdn的js链接

  js: [

    "https://cdn.staticfile.org/vue/2.6.10/vue.min.js",

    "https://cdn.staticfile.org/vuex/3.0.1/vuex.min.js",

    "https://cdn.staticfile.org/vue-router/3.0.3/vue-router.min.js"

  ]

};

// gzip压缩

const CompressionWebpackPlugin = require("compression-webpack-plugin");

// 代码压缩

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {

  productionSourceMap: false,

  assetsDir: './assets',

  pluginOptions: {

    "style-resources-loader": {

      preProcessor: "less",

      patterns: [path.resolve(__dirname, "./src/assets/css/global.less")]

    }

  },

  chainWebpack: config => {

    const oneOfsMap = config.module.rule('scss').oneOfs.store

        oneOfsMap.forEach(item => {

          item

            .use('sass-resources-loader')

            .loader('sass-resources-loader')

            .options({

              // 全局变量文件路径，只有一个时可将数组省去

              resources: ['./src/assets/css/_variable.scss']

            }).end()

        })

    config.resolve.alias

      .set("@", resolve("src"))

      .set("assets", resolve("src/assets"))

      .set("components", resolve("src/components"))

      .set("router", resolve("src/router"))

      .set("utils", resolve("src/utils"))

      .set("static", resolve("src/static"))

      .set("store", resolve("src/store"))

      .set("views", resolve("src/views"));

    // ============压缩图片 start============

    // config.module

    //   .rule('images')

    //   .use('image-webpack-loader')

    //   .loader('image-webpack-loader')

    //   .options({

    //     bypassOnDebug: true

    //   })

    //   .end()

    // ============压缩图片 end============

    // ============注入cdn start============

    config.plugin("html").tap(args => {

      // 生产环境或本地需要cdn时，才注入cdn

      if (isProduction || devNeedCdn) args[0].cdn = cdn;

      return args;

    });

    // ============注入cdn start============

  },

  configureWebpack: config => {

    // 用cdn方式引入，则构建时要忽略相关资源

    if (isProduction || devNeedCdn) config.externals = cdn.externals;

    // 生产环境相关配置

    if (isProduction) {

      // 代码压缩

      config.plugins.push(

        new UglifyJsPlugin({

          uglifyOptions: {

            //生产环境自动删除console

            compress: {

              // warnings: false, // 若打包错误，则注释这行

              drop_debugger: true,

              drop_console: true,

              pure_funcs: ["console.log"]

            }

          },

          sourceMap: false,

          parallel: true

        })

      );

      //gzp压缩

      const productionGzipExtensions = ["html", "js", "css"];

      config.plugins.push(

        new CompressionWebpackPlugin({

          filename: "[path].gz[query]",

          algorithm: "gzip",

          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"), //匹配文件名

          threshold: 10240, //对10K以上的数据进行压缩

          minRatio: 0.8,

          deleteOriginalAssets: false //是否删除源文件

        })

      );

      // 公共代码抽离

      config.optimization = {

        splitChunks: {

          cacheGroups: {

            vendor: {

              chunks: "all",

              test: /node_modules/,

              name: "vendor",

              minChunks: 1,

              maxInitialRequests: 5,

              minSize: 0,

              priority: 100

            },

            common: {

              chunks: "all",

              test: /[\\/]src[\\/]js[\\/]/,

              name: "common",

              minChunks: 2,

              maxInitialRequests: 5,

              minSize: 0,

              priority: 60

            },

            styles: {

              name: "styles",

              test: /\.(sa|sc|c)ss$/,

              chunks: "all",

              enforce: true

            },

            runtimeChunk: {

              name: "manifest"

            }

          }

        }

      };

    }

  },

  devServer: {

    port: 8081,

    proxy: {

      "/rest": {

        target: "https://marketouchplus-uat.brandmax.com.cn",

        ws: false,

        changeOrigin: true

      }

    }

  },

  css: {

    extract: false,

    loaderOptions: {

      // pass options to sass-loader

      // sass: {

      //   data: `@import "@/assets/css/_variable.scss";`

      // },

    }

  }

};