vue-cli3之webpack配置

vue-cli 3 中文文檔
webpack-chain
vue.config.js官方配置指南

當我們項目初始化後，沒有了以前熟悉的 build 目錄，也就沒有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件，可能一時會覺得無從下手，其實是vue-cli3在我們項目初始化的時候，就已經幫我們初始化好了，我們需要做的，只需在vue.config.js文件中加上所需要的配置，其實是變得更加簡單了。

開發者在實際開發過程中，肯定還有需要自己去修改配置的地方。

新建一個vue.config.js文件

vue.config.js 是一個可選的配置文件，如果項目的 (和 package.json 同級的) 根目錄中存在這個文件，那麼它會被 @vue/cli-service 自動加載。你也可以使用 package.json 中的 vue 字段，但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫。一般我們都會寫在vue.config.js文件中。

創建成功接下來就要配置我們的vue.config.js(配置如下)：

const path = require("path");
const UglifyPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  publicPath: "./", // 基本路徑
  outputDir: "dist", // 輸出文件目錄
  lintOnSave: true, // eslint-loader 是否在保存的時候檢查
  assetsDir: "static", //放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄。
  pages: undefined, // 以多頁模式構建應用程序。
  runtimeCompiler: false, // 是否使用包含運行時編譯器的 Vue 構建版本
  // 是否爲 Babel 或 TypeScript 使用 thread-loader。該選項在系統的 CPU 有多於一個內核時自動啓用，僅作用於生產構建，在適當的時候開啓幾個子進程去併發的執行壓縮
  parallel: require("os").cpus().length > 1,
  productionSourceMap: false, // 生產環境是否生成 sourceMap 文件，一般情況不建議打開
  // webpack配置
  //對內部的 webpack 配置進行更細粒度的修改 https://github.com/neutrinojs/webpack-chain see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: config => {
  },
  //調整 webpack 配置 https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // 爲生產環境修改配置...
      config.mode = 'production'
    } else {
      // 爲開發環境修改配置...
      config.mode = 'development'
    }
    Object.assign(config, {
      // 開發生產共同配置
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
          '@c': path.resolve(__dirname, './src/components'),
          '@p': path.resolve(__dirname, './src/pages')
        } // 別名配置
      }
    })
  },
  css: {
    // 啓用 CSS modules
    modules: false,
    // 是否使用css分離插件
    extract: true,
    // 開啓 CSS source maps，一般不建議開啓
    sourceMap: false,
    // css預設器配置項
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/global.scss";`
      },
    }
  },
  pwa: {}, // PWA 插件相關配置
  // webpack-dev-server 相關配置 https://webpack.js.org/configuration/dev-server/
  devServer: {
    // host: 'localhost',
    host: "0.0.0.0",
    port: 8000, // 端口號
    https: false, // https:{type:Boolean}
    open: true, //配置自動啓動瀏覽器  http://172.11.11.22:8888/rest/XX/
    hotOnly: true, // 熱更新
    // proxy: 'http://localhost:8000'   // 配置跨域處理,只有一個代理
    proxy: {
      //配置自動啓動瀏覽器
      "/XX/*": {
        target: "http://172.16.68.134:8089",
        changeOrigin: true,
        // ws: true,//websocket支持
        secure: false
      },
      "/XX2/*": {
        target: "http://172.16.68.134:8089",
        changeOrigin: true,
        //ws: true,//websocket支持
        secure: false
      }
    }
  },
  // 利用splitChunks將每個依賴包單獨打包，在生產環境下配置
  configureWebpack:config => {
    // 開啓gzip壓縮
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: /\.js$|\.html$|\.json$|\.css/,
        threshold: 10240,
        minRatio: 0.8
      }));
      // 開啓分離js
      config.optimization = {
        runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 20000, // 依賴包超過20000bit將被單獨打包
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name (module) {
                // get the name. E.g. node_modules/packageName/not/this/part.js
                // or node_modules/packageName
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                // npm package names are URL-safe, but some servers don't like @ symbols
                return `${packageName.replace('@', '')}`
              }
            }
          }
        },
        minimizer: [new UglifyPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_console: true, // console
              drop_debugger: false,
              pure_funcs: ['console.log'] // 移除console
            }
          }
        })]
      };
      // 取消webpack警告的性能提示
      config.performance = {
        hints:'warning',
            //入口起點的最大體積
            maxEntrypointSize: 50000000,
            //生成文件的最大體積
            maxAssetSize: 30000000,
            //只給出 js 文件的性能提示
            assetFilter: function(assetFilename) {
          return assetFilename.endsWith('.js');
        }
      }
    }
  },
  // 第三方插件配置 https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader
  pluginOptions: {}
};