螢火錢包穀歌瀏覽器插件版(1): vue-cli2升級vue-cli3

先放github地址github.com/imloama/fir…，代碼比較渣，一直想重構，還未重構，考慮等着vue3出了後，跟着用typescript重構一遍（基於vue2的重構版本寫了個開頭，有點難產了）。這是一個區塊鏈電子錢包，主要用於恆星區塊鏈的代幣管理。

這個項目從一開始的vue+cordova的hybrid應用firefly，到vue+electron構造桌面應用desktop-client,再到考慮完成谷歌瀏覽器插件版。大部分代碼是同樣的，採用vue+vuex+vue-router+vuetify寫的，採用webpack打包適配到不一樣的平臺，基於不一樣的平臺，有些特殊的功能代碼。

進化到谷歌瀏覽器插件版，由於vue-cli3已經出了一段時間了，本着學習的態度，嘗試進行遷移適配，感受困難重重，很不適應，經歷磨難，總算是見到曙光了。

從webpack3到webpack4

在vue-cli2時代，主要是使用webpack的配置文件進行處理的，項目中基本上都能見到webpack.xx.config.js相似的文件，從package.json的scripts執行中就能夠看到。

到了vue-cli3時代，默認的webpack文件不見了，而是基於webpack-merge和webpack-chain進行了擴展，能夠自定義vue.config.js，從而實現自定義的功能。

在webpack4以後，也是吸取了rollup等後起之秀的經驗，實現了零配置化，便可以經過webpack --命令行的形式，完成配置，同時也支持經過config.js文件進行配置。

爲了實現一些自定義的打包需求，就須要修改默認的打包過程，這時，就須要在根目錄上建立vue.config.js文件，經過它來實現自定義的打包。

vue.config.js參數

官方配置文件說明地址爲cli.vuejs.org/zh/config

須要自定義的點說明

pages

多頁面打包配置

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板來源
      template: 'public/index.html',
      // 在 dist/index.html 的輸出
      filename: 'index.html',
      // 當使用 title 選項時，
      // template 中的 title 標籤須要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在這個頁面中包含的塊，默認狀況下會包含
      // 提取出來的通用 chunk 和 vendor chunk, index對應着前邊的key-index
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 當使用只有入口的字符串格式時，
    // 模板會被推導爲 `public/subpage.html`
    // 而且若是找不到的話，就回退到 `public/index.html`。
    // 輸出文件名會被推導爲 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}
複製代碼

這部分，對於若是兩個頁面都引用了某個組件，組件中使用了vuex，可能會有問題，我還在嘗試。改造後的項目有問題，新建的工程暫時未發現問題。

productionSourceMap

返回true表示不生成sourcemap文件，sourcemap文件在開發時比較有用，主要是報錯異常相對清晰，而生產中能夠經過返回false取消掉，我是根據環境變量不一樣，返回了不一樣的結果,其中BUILDTYPE是我在執行npm run dev時傳遞的環境變量

productionSourceMap:  process.env.BUILDTYPE === 'dev',
複製代碼

configureWebpack

配置webpack，目前我主要用到了chainWebpack

chainWebpack

因爲谷歌瀏覽器插件須要一個後臺js和content-script等js文件，因此須要配置webpack生成多個js，但生成的html只有一個，從而配置pages就不太合適，按照webpack.config.js中的配置，即設置entry，實質上，pages也是生成了entry，因此添加了多個entrys配置，

config
        .entry('index')
        .add(resolve('src')+'/main.js')
        .end()
        .entry('background')
        .add(resolve('src')+'/background.js')
        .end()
        .entry('chromereload')
        .add(resolve('src')+'/chromereload.js')
        .end()
        .output
        .filename('js/[name].js');
複製代碼

默認狀況下，生成HTML是使用html-webpack-plugin完成的，因爲我取消了pages的值，因此我也刪除了添加的html-webpack-plugin插件，而是改用自定義的引用html-webpack-plugin，同時，取消了preload和prefetch，由於使用谷歌瀏覽器，主要是引用本地文件，沒有網絡請求，這點優化能夠不作。 自定義引用html-webpack-plugin，能夠配置excludeChunks表示哪些entry中的Js不會被包含，或者也可使用chunks，表示引用哪些js，效果是相同的

config.plugins.delete('html')
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')
    
 config.plugin('html')
        .use(new HtmlWebpackPlugin({
            excludeChunks: ['background','chromereload','ffw','ffwmain'],
            // chunks:['chunk-vendors','chunk-common','index'],
            template: 'public/index.html',
            filename: 'index.html'
        }));
複製代碼

添加了copy-webpack-plugin，來完成一些靜態文件的複製

config.plugin('CopyWebpackPlugin')
        .use(new CopyWebpackPlugin([
            {
              from: 'src/manifest.json',
              to: 'manifest.json',
              transform: (content) => {
                const jsonContent = JSON.parse(content);
                jsonContent.version = version;
                if (config.mode === 'development') {
                  jsonContent['content_security_policy'] = "script-src 'self' 'unsafe-eval'; object-src 'self'";
                }
                return JSON.stringify(jsonContent, null, 2);
              },
            },
            {from:'src/_locales', to: '_locales'},
            {from:'src/icons', to: 'icons'}
          ])
      );
複製代碼

vue-cli-service服務

vue-cli-service serve

啓動一個開發服務器，支持熱重載，直接經過瀏覽器訪問，但因爲我須要作一個谷歌瀏覽器插件，沒法經過谷歌瀏覽器的擴展程序進行加載

vue-cli-service build

打包服務，生成的文件能夠經過谷歌瀏覽器的擴展程序進行加載，完成測試。 在測試狀況下，只須要webpack打包，不須要對js進行混淆等處理，因此須要取消混淆的功能，這個須要改動vue.config.js中的chainWebpack部分

chainWebpack: (config)=>{
        let isdev = process.env.BUILDTYPE === 'dev'//dev表示爲開發模式
        if(isdev){
            config.optimization.minimize(false);
        }
    }
複製代碼

目前還在和vue-cli3奮鬥中。