近期專案開發中，遇上 IT 端要求要做到程式碼保護的要求。這時，在打包輸出的 *.js 和 *.css 檔案中，需要包含一些特定的程式碼和版權宣告，這篇記錄下加入這些資訊的方式。
Vue-Cli 3 以後，內建是採用 webpack 打包。若要調整這些額外的設定，那你需要在專案的根目錄新增 vue.config.js 檔案。
情境
在每支拆分出的 *.js 檔中，加上版權宣告
在 vue.config.js ，加入以下的段落：
關鍵字為：preamble，另外在 Vue-cli 中，是採用 terser-webpack-plugin 這支外掛，所以要看設定方面的細節，可以點開 terser-webpack-plugin 的 Github。在內文中有表明它是採用 terser 的套件，所以相關的設定會在 terserOptions 中。
|
1 2 3 4 5 6 7 8 9 |
module.exports = { configureWebpack: config =>{ if(process.env.NODE_ENV === 'production'){ config.optimization.minimizer[0].option.terserOptions.output = { preamble: '/* This is license.*/' } } } } |
這樣子的打包輸出結果，會在每一支 js 檔案的第一行，加上 /* This is license. */。
在每支拆分出的 *.css 檔中，加上版權宣告
這點就會有一些難度，因為沒有套件可以做到如同 preamble 的效果，僅能使用如 /* ! YOUR CONTENT */ 這類的語法，讓 webpack 打包的時候不會忽略這些版權宣告的文字
不想要拆分 JS 和 CSS
這點是屬於 webpack 的預設行為，所以你需要在 chainWebpack 的設定中刪除 splitChunks 的任務，同時將 filenameHashing 改為 false。
|
1 2 3 4 5 |
module.exports = { chainWebpack: config =>{ config.optimization.delete('splitChunks') } } |
參考資料
1. 如何在vue.config.js中配置vue-cli3.0打包之后不显示console
按讚加入粉絲團
