vue打包

1.vue打包配置图片压缩

• (1).安装第三方包：
  cnpm i image-webpack-loader -D
• (2).配置vue.config.js：

chainWebpack: config => {
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
          bypassOnDebug: true
        })
        .end()
  }

2.vue实现打包去除console.log

• (1).安装插件：
  cnpm install babel-plugin-transform-remove-console -D
• (2).进入项目根目录下创建babel.config.js文件：

let plugins = [];
if (process.env.NODE_ENV === "production") {    // todo  if判断是否打包,打包环境下控制台去掉console.log,也可去掉if判断，整个项目不会出现console.log(不建议)
  plugins.push("transform-remove-console");
}
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: plugins
};

• 3.项目打包

• (1).package.json配置：
  开发调试： "build:dev": "vue-cli-service build --mode dev" 命令： npm run build:dev
  线上： "build:prod": "vue-cli-service build --mode prod" 命令：npm run build:prod
• (2).打包后如何运行：
  • 安装依赖：npm i -g serve
  • 启动打包后的项目：serve dist

• 4.进一步打包压缩

• (1).安装插件：
  cnpm install compression-webpack-plugin@1.1.12 -D
• (2).vue.config.js配置：

const CompressionPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
  publicPath: "./", //打包后的路径
  productionSourceMap: false, //不需要生产环境的 source map
  // 路径别名
  chainWebpack: (config) => {
    config.resolve.alias
      .set("@", resolve("./src"))
      .set("@components", resolve("./src/components"))
      .set("@assets", resolve("./src/assets"))
      .set("@request", resolve("./src/request"));
    // 文件压缩
    if (process.env.NODE_ENV === "production") {
      config.plugin("compressionPlugin").use(
        new CompressionPlugin({
          algorithm: "gzip", //压缩方式
          test: productionGzipExtensions, //匹配压缩文件
          threshold: 10240, //对超过10k的数据压缩
          deleteOriginalAssets: false, //不删除源文件
        })
      );
    }
  },
};