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
//       ]
//     })
// }