vue.config.js配置之configureWebpack(两种用法)

您所在的位置：网站首页 › vuecli配置文件 › vue.config.js配置之configureWebpack(两种用法)

vue.config.js配置之configureWebpack(两种用法)

2023-03-05 18:14| 来源: 网络整理| 查看: 265

vue.config.js是vue-cli3之后新增的一个功能，再这个版本里面如果要配置webpack相关的属性，就需要自己在项目根目录新建vue.config.js这个文件，然后在该文件里面去写入你需要的配置等等。

vue.config.js的具体配置参数可以参照vue-cli文档地址：vue.config.js配置

在配置的过程中遇到一个属性，configureWebpack，先来看看文档说明：

configureWebpack

Type: Object | Function

如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。

如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。

这个属性特别之处就是，他有两种类型形态，但是又不能重复使用，而在某些情况既需要对象类型的配置，也需要函数类型的配置，查找文档半天，终于找到了解决方案：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin') module.exports = { publicPath: './',//根路径 cli3.0以上使用publicPath //assetsDir:'assets',//静态资源目录(js,css,img,fonts)这些文件都可以写里面 outputDir:'dist',//打包的时候生成的一个文件名 lintOnSave:false,//是否开启eslint保存检测 ,它的有效值为 true || false || 'error'\ configureWebpack: config => { if (process.env.NODE_ENV === "production") { // 为生产环境修改配置... config.mode = "production"; // 这里修改下 config.optimization.minimizer = [ new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, drop_console: true, //console drop_debugger: true, pure_funcs: ['console.log'] //移除console } } }) ] //打包文件大小配置 config["performance"] = { "maxEntrypointSize":10000000, "maxAssetSize":30000000 } } else { // 为开发环境修改配置... config.mode = "development"; } } }

上面是统一使用configureWebpack的函数模式，然后函数模式里面默认会有一个config参数，需要增加或者修改configureWebpack对应的参数，就直接使用config去修改就可以了！

我这里使用了两个功能，第一个是打包build的时候去掉console的调试信息，第二个就是修改打包静态资源文件大小设置的配置

【本文地址】

vue.config.js配置之configureWebpack(两种用法)

vue.config.js配置之configureWebpack(两种用法)

今日新闻

推荐新闻