Vue CLi3 修改 webpack 配置

审查项目的 webpack 配置

因为 @vue/cli-service 对 webpack 配置进行了抽象，当你想查看 webpack 的配置时可以使用 inspect命令：

vue inspect # 在终端打印 webpack配置信息

vue inspect > output.js # 把webpack配置信息生成到output.js文件

注意，output.js 文件不是一个有效的 webpack 配置文件，仅用于审查。

修改 webpack 配置

以修改路径别名为例：

1. 项目根目录创建文件 vue.config.js

2. 参考如下代码修改路径别名：

// vue.config.js
const path = require('path')
const resolve = dir => path.resolve(__dirname, dir)

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('styles', resolve('src/assets/styles'))
  }
}

参考

• 官方文档 (opens new window)

• 官方 vue.config.js 参数说明 (opens new window)

• vue.config.js 设置接口代理示例 (opens new window)

• 配置示例：

const path = require('path')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const ProxyAgent = require('proxy-agent')
const resolve = dir => path.resolve(__dirname, dir)
module.exports = {
  outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
  runtimeCompiler: true,
  assetsDir: 'static',
  productionSourceMap: false, // 生产环境的 source map
  parallel: require('os').cpus().length > 1,
  configureWebpack: config => {
    // 公共配置
    // cdn引用时配置externals 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖
    config.externals = {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'element-ui': 'ELEMENT',
      'vuex': 'Vuex',
      'axios': 'axios'
    }
    config.resolve.alias = Object.assign({}, config.resolve.alias, {
      'src': resolve('src/common'),
      'common': resolve('src/views/common'),
      'static': resolve('static')
    })
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.optimization = {
        minimizer: [
          new UglifyJsPlugin({
            uglifyOptions: {
              compress: {
                drop_console: true, // console
                drop_debugger: false,
                pure_funcs: ['console.log']// 移除console
              }
            }
          })
        ]
      }
    } else {
      // 为开发环境修改配置...
    }
  },
  css: {
    loaderOptions: {
      css: {
        importLoaders: 1 // @import 引入的文件可被一个loader处理 （2 可被两个loader处理）
      }
    }
  },
  devServer: {
    port: 80,
    disableHostCheck: true, // 可使用本地host配置的域名访问
    proxy: {
      '/api': {
        agent: new ProxyAgent('http://132.128.11.12'),
        target: 'http://132.128.11.12',
        ws: false,
        changeOrigin: true
      }
    }

  }
}