基于vue-cli的vue.config.js常用配置

1.webpack分包

webpack4中的optimization.splitChunks 进行代码分割, 把需要单独抽离的文件单独打包

配置:

chainWebpack:config => {  config.optimization.splitChunks({      chunks:  "all"      cacheGroups: {        Vendor: {            Name: "chunk-vendors",            Test: /[\\]node_modules[\\/]/,            Priority: 10,            Chunks: "initial"        },        Iview: {            Name: "chunk-iview",            Prority: 20,            Test: /[\\/]node_modules[\\/]_?iview(.*)/        },        commons:{            name:'chunk-commons',            minChunks:2,            priority:5,            chunks:'initial',            reuseExistingChunk:true        }      }  })}

2.autoDllPlugin缓存

DLL文件为动态链接库, 在一个动态链接库中可以包含给其他模块调用的函数和数据

简单的说, 就是包含大量复用模块的动态链接库只需要编译一次, 在之后的构建过程中被动态链接库包含的模块将不会再重新编译, 而是直接使用动态链接库中的代码.

动态链接库中大多数包含的是常用的第三方模块, 如: vue, react等, 只要不升级这些模块的版本, 动态链接库就不需要重新编译

Plugins: [  New AutoDllPlugin({      Inject: true,             // 自动引用      Filename: '[name].js',    // 文件名      Entry: {                                 vendor: [             // 需要打包为vendor包的文件            'vue',            'iview'          ]      }  })]

3.terser-webpack-plugin去除console.log

现在webpack4默认使用terser-webpack-plugin进行代码压缩

yarnadd --dev terser-webpack-pluginconst TerserPlugin = require('terser-webpack-plugin')config.plugins.push(  new TerserPlugin({    cache: true,       // 开启缓存    parallel: true,    // 开启多进程执行, 可以是自定义number    sourceMap: false,  // 关闭sourceMap    terserOptions: {          compress: {              drop_console: false,              drop_debugger: true,              pure_funcs: ['console.log']  // 移除console       }    }  }))

4.HappyPack多进程打包

把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程

yarn add --dev happypackconst os = require('os')const HappyPack = require('happypack')const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })config.plugins.push(  new HappyPack({    id: 'happy-babel-js',    loaders: ['babel-loader?cacheDirectory=true'],    threadPool: happyThreadPool  }))

Webpack4之后官方推荐使用thread-loader替代

vue-cli4中通过设置: parallel: require('os').cpus().length > 1开启, 仅作用于生产构建

5.添加别名alias

即项目中我们:

import Detail from "@/components"的方式引用时, 打包后路径能被解析不报错

chaninWebpack: config => {  config.resolve.alias    .set("@", resolve("src"))    .set("@components", resolve("src/components"))}

6.devServer本地代理

yarn add --dev webapck-dev-serverdevServer: {    open: true,       // 构建完成自动打开浏览器    openPage: ''      // 打开指定页面路径    compress: true,   // 开启gzip压缩    port: 8083,       // 端口号    host: '0.0.0.0',  // ip地址, 局域网访问,    hot: false,       // 热模块更新作用    inline: false,    // 关闭热更新    https: false,     // 开启https代理    proxy: {          // 配置多个代理     '/admin': { // 匹配接口前缀, 如: 请求为axios.post('/admin/user/userInfo'),        target: 'https://test.dasheng0609.com:19004', // 接口请求地址, 就是将"/admin"替换成target值        changeOrigin: true,  //开启代理, 在本地创建一个虚拟服务端        secure: false,        pathRewrite: {    // 重写路径          '^/admin': ''   // 正则匹配 "/admin"前缀, 替换为""空, 如果需要修改为其他的, 可以在这里修改        }     }   }}

以上配置本地代理后,如: 接口请求为axios.post('/admin/user/userInfo'),

实际上变为: https://test.dasheng0609.com:19004/user/userInfo

 

7.动态使用CDN

a.配置要externals的文件, 如vue, react, UI库, axios等

configureWebpack:config => {  config.externals = {    "vue": "Vue",    "iview": "iview",    "vue-router":"VueRouter",    "vuex": "Vuex",    "axios": "axios"  }}

b.根据环境动态引用CDN, 这里的cdn就是你提前配置好的cdn文件

const cdn = require('./config/cdn') config.plugin('html').tap(args => {    if (process.env.NODE_ENV === 'production') {        args[0].cdn = cdn.build    }    if (process.env.NODE_ENV === 'development') {        args[0].cdn = cdn.dev    }     return args}

c.在入口文件index.html中动态创建

<% for (var i in htmlWebpackPlugin.options.cdn &&htmlWebpackPlugin.options.cdn.js) { %>  type="text/javascript"  src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"><% } %>