项目常用webpack配置

最新推荐文章于 2024-08-09 07:01:47 发布

置顶

qq_35993607

最新推荐文章于 2024-08-09 07:01:47 发布

阅读量1.9k

点赞数 3

分类专栏：项目常用

本文链接：https://blog.csdn.net/qq_35993607/article/details/89451474

版权

本文介绍了项目中常用的webpack配置，包括使用webpack-bundle-analyzer进行包大小分析，解决svg解析问题，实现lodash按需引入，开启gzip压缩，分环境打包，管理线上接口与mock，利用dllplugin加速打包，以及在生产环境中移除debugger和console.log。

摘要由CSDN通过智能技术生成

1.分析工具：webpack-bundle-analyzer

  "scripts": {
    "serve": "vue-cli-service serve",
    "build:dev": "vue-cli-service build --mode dev",
    "build:test": "vue-cli-service build --mode test",
    "build:prod": "vue-cli-service build --mode prod --report",
    "lint": "vue-cli-service lint",
    "inspect": "vue-cli-service inspect>webpackConfig.js",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
  },

生产环境：直接使用vuecli3自带的--report即可

开发环境：vuecli3内置了webpack-bundle-analyzer，所以直接配置使用，不需要npm导入

chainWebpack(config) {
    if (process.env.VUE_APP_IS_ANALYZ === 'true') {
      config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }
  }

treemap sizes：

stat：

这是文件的“输入”大小，在任何转换（如缩小）之前。

它被称为“stat-size”，因为它是从Webpack的stats对象获得的。

parsed：

这是文件的“输出”大小。如果您使用的是像uglify这样的Webpack插件，那么这个值将反映代码的小型化。

gzipped：

这是通过gzip压缩运行解析的包/模块的大小。

2.svg解析