vue-cli 3.x vue.config.js配置（包含webpack）

使用vue-cli3.x首先建立一個項目：cli.vuejs.org/zh/guide/cr…

配置生成後的文件目錄大概是一下樣式：【想直接看配置的直接往下拉！！！】

代碼地址：download.csdn.net/download/we…

已經沒有了webpack.config.js文件。取而代之的是建立一個vue.config.js文件。官網是這樣介紹的

貼一下代碼：vue.config.js文件

const path = require("path");
const resolve = dir => path.join(__dirname, dir);
//用於生產環境去除多餘的css
const PurgecssPlugin = require("purgecss-webpack-plugin");
//全局文件路徑
const glob = require("glob-all");
//壓縮代碼並去掉console
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
//代碼打包zip
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
  // 廢棄baseUrl  通常運維會配置好的
  publicPath: process.env.NODE_ENV === "production" ? "/configtest/" : "/",
  //打包的輸出目錄
  outputDir: "dist/configtest",
  //保存是校驗
  lintOnSave: true,
  //若是文件等設置
  pages: {
    index: {
      entry: "src/main.js",
      template: "public/index.html",
      filename: "index.html"
    }
  },
  //靜態資源打包路徑
  assetsDir: "static",
  //默認false 能夠加快打包
  productionSourceMap: false,
  //打包後的啓動文件
  indexPath: "congfigtest.html",
  //打包文件是否使用hash
  filenameHashing: true,
  runtimeCompiler: false,
  transpileDependencies: [],
  //打包的css路徑及命名
  css: {
    modules: false,
    //vue 文件中修改css 不生效 註釋掉  extract:true
    extract: {
      filename: "style/[name].[hash:8].css",
      chunkFilename: "style/[name].[hash:8].css"
    },
    sourceMap: false,
    loaderOptions: {
      css: {},
      less: {
        // 向全局less樣式傳入共享的全局變量
        // data: `@import "~assets/less/variables.less";$src: "${process.env.VUE_APP_SRC}";`
      },
      // postcss 設置
      postcss: {
        plugins: [
          require("postcss-px-to-viewport")({
            viewportWidth: 750, // 視窗的寬度，對應的是咱們設計稿的寬度，通常是750
            viewportHeight: 1334, // 視窗的高度，根據750設備的寬度來指定，通常指定1334，也能夠不配置
            unitPrecision: 3, // 指定`px`轉換爲視窗單位值的小數位數（不少時候沒法整除）
            viewportUnit: "vw", // 指定須要轉換成的視窗單位，建議使用vw
            selectorBlackList: [".ignore", ".hairlines"], // 指定不轉換爲視窗單位的類，能夠自定義，能夠無限添加,建議定義一至兩個通用的類名
            minPixelValue: 1, // 小於或等於`1px`不轉換爲視窗單位，你也能夠設置爲你想要的值
            mediaQuery: false // 容許在媒體查詢中轉換`px`
          })
        ]
      }
    }
  },
  //webpack 鏈式配置   默認已經配置好了  node_moudles/@vue
  chainWebpack: config => {
    // 修復HMR
    config.resolve.symlinks(true);
    // 修復Lazy loading routes  按需加載的問題，若是沒有配置按需加載不須要寫，會報錯
    // config.plugin("html").tap(args => {
    //   args[0].chunksSortMode = "none";
    //   return args;
    // });
    //添加別名
    config.resolve.alias
      .set("@", resolve("src"))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"))
      .set("layout", resolve("src/layout"))
      .set("base", resolve("src/base"))
      .set("static", resolve("src/static"));
    // 壓縮圖片
    config.module
      .rule("images")
      .use("image-webpack-loader")
      .loader("image-webpack-loader")
      .options({
        mozjpeg: { progressive: true, quality: 65 },
        optipng: { enabled: false },
        pngquant: { quality: "65-90", speed: 4 },
        gifsicle: { interlaced: false },
        webp: { quality: 75 }
      });
  },
  //webpack 配置
  configureWebpack: config => {
    const plugins = [];
    //去掉不用的css 多餘的css
    plugins.push(
      new PurgecssPlugin({
        paths: glob.sync([path.join(__dirname, "./**/*.vue")]),
        extractors: [
          {
            extractor: class Extractor {
              static extract(content) {
                const validSection = content.replace(
                  /<style([\s\S]*?)<\/style>+/gim,
                  ""
                );
                return validSection.match(/[A-Za-z0-9-_:/]+/g) || [];
              }
            },
            extensions: ["html", "vue"]
          }
        ],
        whitelist: ["html", "body"],
        whitelistPatterns: [/el-.*/],
        whitelistPatternsChildren: [/^token/, /^pre/, /^code/]
      })
    );
    //啓用代碼壓縮
    plugins.push(
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false,
            drop_console: true,
            drop_debugger: false,
            pure_funcs: ["console.log"] //移除console
          }
        },
        sourceMap: false,
        parallel: true
      })
    ),
      //代碼壓縮打包
      plugins.push(
        new CompressionWebpackPlugin({
          filename: "[path].gz[query]",
          algorithm: "gzip",
          test: productionGzipExtensions,
          threshold: 10240,
          minRatio: 0.8
        })
      );
    config.plugins = [...config.plugins, ...plugins];
  },
  parallel: require("os").cpus().length > 1,
  pluginOptions: {},
  pwa: {},
  //設置代理
  devServer: {
    port: 8080,
    host: "0.0.0.0",
    https: false,
    open: true,
    openPage: "about",
    hot: true,
    disableHostCheck: true,
    proxy: {
      "/api": {
        target: "https://cdn.awenliang.cn",
        ws: true,
        changeOrigin: true
      },
      "/foo": {
        target: "https://cdn.awenliang.cn",
        ws: true,
        changeOrigin: true
      }
    }
  }
};
複製代碼

.browsersliststrc

> 1%
last 2 versions
not ie <= 8
### babel.config.js
複製代碼

//npm i --save-dev babel-plugin-transform-remove-console
const plugins = [];
// if(['production', 'prod'].includes(process.env.NODE_ENV)) {
//   plugins.push("transform-remove-console")
// }

module.exports = {
  presets: [["@vue/app", { useBuiltIns: "entry" }]],
  plugins: plugins
};
複製代碼

postcss.config.js

const autoprefixer = require("autoprefixer");
let plugins = [];
module.exports = {
  plugins: [...plugins, autoprefixer]
};
複製代碼