vue.config.js更细粒度的配置webpack

Posted 2023-05-03

参考技术A

vue2.0之后配置都写在 vue.config.js 文件中，这篇文章说一下项目常用的配置

由于所有的配置都被封装起来了，所以我们查看webpack配置，可以用以下几个命令

使用vue-cli创建一个项目，我们运行 vue inspect --rules 命令看一下输出

我们有这样一个需求：项目中想使用svg图片，但是不希望用默认的loader解析svg，所以我们要自己配置svg的规则

配置前我们需要明白怎样链式配置webpack，就是在 vue.config.js 里面使用 chainWebpack 这个方法，不明白没关系，继续走。

1.禁用webpack默认对svg图片解析的行为
2.配置我们自己的规则解析svg图片
3.封装一个组件，自动引入所有的svg图片

首先我们查看一下 svg 的默认配置，运行 vue inspect --rule svg 命令

看一下结果，可以成功显示

接下来 vue.config.js 文件中，使用 chainWebpack 这个方法，这个方法会传入一个 config 参数，利用 config.module.rule() 这个方法，得到 svg 这个规则里面的详细配置信息，之后调用 .exclude 这个Set对象的 .add() 方法，将我们不希望处理的文件夹路径添加进去，从而完成禁用。

最后我们看一下配置完的 svg 之后的规则，有什么不同

禁用之后重新启动项目，ok，报错

安装依赖

使用 config.module.rule("icons") 创建一个icons规则

使用 vue inspect --rule icons 查看我们新配置的icons规则

到这一步我们的svg就算是配置成功，但是项目中不可能只有一个svg图片，我们不可能每次使用svg图片的时候都要引入，我们希望更加丝滑一些，所以我们要封装一个组件并且自动引入所有的svg图片
我们希望用的时候，传入一个名字就可以

新建Svg.vue

在icons文件夹中新建index.js

main.js中引入

App.vue中使用这个组件

图片成功显示，配置成功

vue_cli的vue.config.js文件常用配置

vue_cli的vue.config.js文件

• vue.config.js文件常用配置

vue.config.js文件常用配置

module.exports = {
  // 手机端访问
  // devServer: {
  //   disableHostCheck: false,安装命令
  //   host: '0.0.0.0',
  //   port: 8080,
  //   https: false,
  //   hotOnly: false,
  //   proxy: null
  // },
  // 配置彻底懒加载
  chainWebpack: config => {
    config.plugins.delete('prefetch')
    // 删除index.html开头的带有prefetch属性的link，不要异步下载暂时不需要的页面组件文件
  },
  // 配置http-proxy代理方式跨域
  // devServer: {
  //   proxy: {
  //     // 凡是以/开头的相对路径，都交给DevServer代为发送请求
  //     '/': {
  //       target: 'https://apis.map.qq.com/ws/geocoder/v1',
  //       changeOrigin: true // 开启跨域
  //     }
  //   }
  // },
  // 配置html-loader插件
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\\.(html)$/,
          exclude: /node_modules/,
          use: {
            loader: 'html-loader',
            options: {
              minimize: true
            }
          }
        }
      ]
    }
  }
}