vue 關於webpack配置的幾個優化

由於vue-cli3將webpack的基礎配置全部內嵌了，這就導致我們初始化項目完成之後發現原先的webpack的config配置全部都消失不見了，那該怎麼辦呢？別慌，vue-cli3早就考慮到了這一點，它預留了一個vue.config.js的js文件供我們對webpack進行自定義配置。

vue.config.js官方配置指南

在項目根目錄下新建vue.config.js文件與package.json同級

下面說幾個優化配置

1.配置別名alias
項目中使用引入文件有時候路徑比較深，需要使用"…/…/…/xx.js"這種類似的路勁引入，這種方式比較笨，可以使用webpack的別名alias配置來解決。

首先，先確定項目中是否有path模塊，如果沒有的話需要先安裝path

npm  install  path  --save

以下爲vue.config.js配置

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
 chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('imgs', resolve('src/assets/imgs'))
      .set('components', resolve('src/components'))
      .set('http', resolve('src/http'))
      .set('utils', resolve('src/utils'))
      .set('views', resolve('src/views'))
  },
}

使用方法

2.開啓gizp壓縮
gizp壓縮是一種http請求優化方式，通過減少文件體積來提高加載速度。html、js、css文件甚至json數據都可以用它壓縮，可以減小60%以上的體積。webpack在打包時可以藉助 compression webpack plugin 實現gzip壓縮。

安裝npm

npm install -D compression-webpack-plugin

在vue.config.js中配置

const CompressionPlugin = require('compression-webpack-plugin')

module.exports = {
 configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css$/,
            // 超過10k才壓縮
            threshold: 10240,
            // 是否刪除源文件
            deleteOriginalAssets: false
          })
        ]
      }
    }
  },

}

3.打包時去除打印信息（console）

項目開發階段經常需要console一些測試數據，查看開發過程中遇到的問題，但生產環境中這些console數據需要清掉。
本來想着使用uglifyjs-webpack-plugin，但是實際上使用這個插件會報錯無法使用（可能是由於es6沒有轉成es5造成的），所以這裏推薦使用terser-webpack-plugin 代替，實現生產去除 console.log

安裝npm

npm install terser-webpack-plugin --save-dev

在vue.config.js 配置

const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        optimization: {
          minimizer: [
            new TerserPlugin({
              terserOptions: {
                ecma: undefined,
                warnings: false, // 傳遞true以在中返回壓縮機警告result.warnings。使用該值可"verbose"獲取更詳細的警告。
                parse: {},
                compress: {
                  drop_console: true, // 移除console
                  drop_debugger: true, // 移除debugger
                  pure_funcs: ['console.log'] // 移除console
                }
              }
            })
          ]
        }
      }
    }
  },

}

完整的webpack配置如下：

// vue.config.js
const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin') // 引入刪除console插件

function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/uduhs-ui/' : '/', // 這個地址跟nginx的地址相關
  outputDir: 'dist',
  assetsDir: 'static',
  // 打包gzip
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        optimization: {
          minimizer: [
            new TerserPlugin({
              terserOptions: {
                ecma: undefined,
                warnings: false, // 傳遞true以在中返回壓縮機警告result.warnings。使用該值可"verbose"獲取更詳細的警告。
                parse: {},
                compress: {
                  drop_console: true, // 移除console
                  drop_debugger: true, // 移除debugger
                  pure_funcs: ['console.log'] // 移除console
                }
              }
            })
          ]
        },
        plugins: [
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css$/,
            // 超過10k才壓縮
            threshold: 10240,
            // 是否刪除源文件
            deleteOriginalAssets: false
          })
        ]
      }
    }
  },

  filenameHashing: true,
  // eslint-loader 是否在保存的時候檢查
  lintOnSave: true,
  // 是否使用包含運行時編譯器的Vue核心的構建
  runtimeCompiler: false,
  // 默認情況下 babel-loader 忽略其中的所有文件 node_modules
  transpileDependencies: [],
  // 生產環境 sourceMap,打包時不生成.map文件 避免看到源碼
  productionSourceMap: false,
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type =>
      addStyleResource(config.module.rule('less').oneOf(type))
    )
    config.resolve.alias
      .set('@', resolve('src'))
      .set('imgs', resolve('src/assets/imgs'))
      .set('components', resolve('src/components'))
      .set('http', resolve('src/http'))
      .set('utils', resolve('src/utils'))
      .set('views', resolve('src/views'))
  },
  /*   // 配置高於chainWebpack中關於 css loader 的配置
  css: {
    // 是否開啓支持 foo.module.css 樣式
    modules: false,
    // 是否使用 css 分離插件 ExtractTextPlugin，採用獨立樣式文件載入，不採用 <style> 方式內聯至 html 文件中
    extract: false,
    // 是否構建樣式地圖，false 將提高構建速度
    sourceMap: false,
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }, */
  devServer: {
    open: true,
    port: 777, // 端口號
    https: false,
    hotOnly: false,
    // proxy: {
    //   '/api': {
    //     target: '', // 本地地址
    //     changeOrigin: true,
    //     ws: true
    //   },
    //   '/foo': {
    //     target: '<other_url>'
    //   }
    // },
    before: app => { }
  },
  // 構建時開啓多進程處理 babel 編譯
  parallel: require('os').cpus().length > 1,
  pwa: {},
  // 第三方插件配置
  pluginOptions: {}
}

// function addStyleResource (rule) {
//   rule
//     .use('style-resource')
//     .loader('style-resources-loader')
//     .options({
//       patterns: [
//         path.resolve(__dirname, 'src/assets/css/styles/global.less') // 需要全局導入的less
//       ]
//     })
// }