webpack vue 打包優化

問題描述

在專案優化中，有一種方案，不經常更新的第三方包可以不打在 vendor.js 中，可以在 .html 模板中引入，然後在 webpack 中配置排除這些包，但是會遇到一個問題，就是開發環境中，如果排除掉 vue.js 不打入 vendor.js 中，則無法使用 vue devtools 進行除錯，如果不排除 vue.js ，則又會和模板中引入的 vue.js 衝突報錯，以下是我的解決方案；

解決方案

思路：
1. 在 webpack 配置中，根據環境變數來判斷是否排除 vue；
2. 在 HtmlWebpackPlugin 外掛中傳參需要插入的 vue.js 的 script 引入的字串；
3. 在 html 模板中寫入模板語法，動態注入 vue.js;
4. 通過 ejs-loader 編譯 html 中的模板語法；

關鍵程式碼如下

webpack.base.conf.js

// webpack.base.conf.js

let externals = {
  'vuex': 'Vuex',
  'vue-router': 'VueRouter',
  'jquery': 'jQuery',
  'mint-ui': 'mintUi',
  'vueg': 'vueg',
}

if (process.env.NODE_ENV === 'production') {
  Object.assign(externals, {
    'vue': 'Vue',
  })
}

module.exports = {
  externals,
  module: {
    rules: [
      {
        test:/\.html$/
 
,
        loader:'ejs-loader',
      },
    ]
  }      
}  

webpack.prod.conf.js

// webpack.prod.conf.js

webpackConfig.plugins.push(new HtmlWebpackPlugin({
  script:'<script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>',
}));

.html 模板中

// .html

<%=htmlWebpackPlugin.options
 
.script%>