vue-cli 3.0 打包后刪除 console.log

一泥耀、babel-plugin-transform-remove-console

1.先下載

npm install babel-plugin-transform-remove-console --save-dev

2. 在 babel.consig.js 中配置

if (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "sit") {
  plugins.push("transform-remove-console");
}

二谱姓、terser-webpack-plugin

1.先下載

npm install terser-webpack-plugin --save-dev

2. vue.config.js 中引入

const TerserPlugin = require("terser-webpack-plugin");

config.plugins.push(
  //去掉打包之后的打印
  new TerserPlugin({
    terserOptions: {
      ecma: undefined,
      warnings: false,
      parse: {},
      compress: {
        drop_console: true,
        drop_debugger: false,
        pure_funcs: ["console.log"], // 移除console
      },
    },
  })
);

3.完整版 vue.config.js

const TerserPlugin = require("terser-webpack-plugin");
// const CompressionWebpackPlugin = require('compression-webpack-plugin');
// const productionGzipExtensions = ['js', 'css'];
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
  // 基本路徑
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
  // 輸出文件目錄
  outputDir: "dist", // 默認(rèn)dist
  // 用于嵌套生成的靜態(tài)資產(chǎn)(js,css,img,fonts)目錄
  // assetsDir: '',
  // 指定生成的 index.html 的輸出路徑 (相對(duì)于 outputDir)。也可以是一個(gè)絕對(duì)路徑
  indexPath: "index.html", // Default: 'index.html'
  filenameHashing: true,
  // 構(gòu)建多頁(yè)時(shí)使用
  pages: undefined,
  // eslint-loader是否在保存的時(shí)候檢查
  lintOnSave: false,
  // 是否使用包含運(yùn)行時(shí)編譯器的Vue核心的構(gòu)建
  runtimeCompiler: false,
  // 默認(rèn)情況下 babel-loader 會(huì)忽略所有 node_modules 中的文件叹誉。如果你想要通過(guò) Babel 顯式轉(zhuǎn)譯一個(gè)依賴,可以在這個(gè)選項(xiàng)中列出來(lái)
  transpileDependencies: [],
  // 如果你不需要生產(chǎn)環(huán)境的 source map,可以將其設(shè)置為 false 以加速生產(chǎn)環(huán)境構(gòu)建扁藕。
  productionSourceMap: false,
  // 如果這個(gè)值是一個(gè)對(duì)象,則會(huì)通過(guò) webpack-merge 合并到最終的配置中疚脐。如果這個(gè)值是一個(gè)函數(shù)亿柑,則會(huì)接收被解析的配置作為參數(shù)。該函數(shù)及可以修改配置并不返回任何東西棍弄,也可以返回一個(gè)被克隆或合并過(guò)的配置版本望薄。
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "production") {
      // 為生產(chǎn)環(huán)境修改配置...
      // const plugins = []
      // plugins.push(
      //     new CompressionWebpackPlugin({
      //         filename: '[path].gz[query]',
      //         algorithm: 'gzip',
      //         test: productionGzipExtensions,
      //         threshold: 10240,
      //         minRatio: 0.8
      //     })
      // )
      // config.plugins = [...config.plugins, ...plugins]
      config.plugins.push(
        //去掉打包之后的打印
        new TerserPlugin({
          terserOptions: {
            ecma: undefined,
            warnings: false,
            parse: {},
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ["console.log"], // 移除console
            },
          },
        })
      );
    } else {
      // 為開(kāi)發(fā)環(huán)境修改配置...
    }
  },

  // 是一個(gè)函數(shù)疟游,會(huì)接收一個(gè)基于 webpack-chain 的 ChainableConfig 實(shí)例。允許對(duì)內(nèi)部的 webpack 配置進(jìn)行更細(xì)粒度的修改痕支。
  chainWebpack: (config) => {
    config.module
      .rule("images")
      .use("image-webpack-loader")
      .loader("image-webpack-loader")
      .options({ bypassOnDebug: true })
      .end();
    /*config.module
              .rule('images')
              .use('url-loader')
                .loader('url-loader')
                .tap(options => {
                  // 修改它的選項(xiàng)...
                  return options
                })*/
  },
  // css相關(guān)配置
  css: {
    // 啟用 CSS modules
    requireModuleExtension: false,
    // 是否使用css分離插件
    extract: false,
    // 開(kāi)啟 CSS source maps?
    sourceMap: false,
    // css預(yù)設(shè)器配置項(xiàng)
    loaderOptions: {
      sass: { prependData: `@import "@/assets/css/reset.scss";` },
    },
  },
  // webpack-dev-server 相關(guān)配置
  devServer: {
    host: "0.0.0.0",
    port: 8080,
    https: false,
    open: true,
    hotOnly: false,
    proxy: null, // 設(shè)置代理
    disableHostCheck: true, // 禁用webpack熱重載檢查 解決熱更新失效問(wèn)題
    before: (app) => {},
  },
  // PWA 插件相關(guān)配置
  pwa: {},

  // 第三方插件配置
  pluginOptions: {
    // ...
  },
};
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末颁虐,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子卧须,更是在濱河造成了極大的恐慌另绩,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,185評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件花嘶,死亡現(xiàn)場(chǎng)離奇詭異笋籽,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)椭员,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門车海,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人拆撼,你說(shuō)我怎么就攤上這事容劳。” “怎么了闸度?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,524評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵竭贩,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我莺禁,道長(zhǎng)留量,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,339評(píng)論 1 293
  • 正文 為了忘掉前任哟冬,我火速辦了婚禮楼熄,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘浩峡。我一直安慰自己可岂,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,387評(píng)論 6 391
  • 文/花漫 我一把揭開(kāi)白布翰灾。 她就那樣靜靜地躺著缕粹,像睡著了一般。 火紅的嫁衣襯著肌膚如雪纸淮。 梳的紋絲不亂的頭發(fā)上平斩,一...
    開(kāi)封第一講書(shū)人閱讀 51,287評(píng)論 1 301
  • 那天,我揣著相機(jī)與錄音咽块,去河邊找鬼绘面。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的揭璃。 我是一名探鬼主播晚凿,決...
    沈念sama閱讀 40,130評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼塘辅!你這毒婦竟也來(lái)了晃虫?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 38,985評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤扣墩,失蹤者是張志新(化名)和其女友劉穎哲银,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體呻惕,經(jīng)...
    沈念sama閱讀 45,420評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡荆责,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,617評(píng)論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了亚脆。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片做院。...
    茶點(diǎn)故事閱讀 39,779評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖濒持,靈堂內(nèi)的尸體忽然破棺而出键耕,到底是詐尸還是另有隱情,我是刑警寧澤柑营,帶...
    沈念sama閱讀 35,477評(píng)論 5 345
  • 正文 年R本政府宣布屈雄,位于F島的核電站,受9級(jí)特大地震影響官套,放射性物質(zhì)發(fā)生泄漏酒奶。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,088評(píng)論 3 328
  • 文/蒙蒙 一奶赔、第九天 我趴在偏房一處隱蔽的房頂上張望惋嚎。 院中可真熱鬧,春花似錦站刑、人聲如沸另伍。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,716評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)质况。三九已至,卻和暖如春玻靡,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背中贝。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,857評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工囤捻, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人邻寿。 一個(gè)月前我還...
    沈念sama閱讀 47,876評(píng)論 2 370
  • 正文 我出身青樓蝎土,卻偏偏與公主長(zhǎng)得像视哑,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子誊涯,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,700評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容