前端學習（2736）：重讀vue電商網站46之執行build 時報錯

 

Error: No module factory available for dependency type: CssDependency

解決辦法：

參考：解決webpack打包報錯 No module factory available for dependency type: CssDependency

在執行 build 命令期間移除所有的 console

babel-plugin-transform-remove-console 官方文檔傳送門

可以通過 vue-ui 面板，選擇開發依賴，然後輸入 babel-plugin-transform-remove-console 進行安裝

npm

Javascript

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

安裝依賴之後，打開 babel.config.js文件，在 plugins 插件處，添加一個字符串，'transform-remove-console'，如下圖所示位置。

Javascript

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    'transform-remove-console'
  ]
}

上述設置好了之後，還存在一個問題，我們只需要在發佈階段纔會去除 console ，在開發和測試環境下如果去除了 console，對於我們調試方面不太好。因此，我們需要設置只在生產環境下去除 console。

通過上下兩個圖比較，我們可以發現，在開發環境下 mode 值爲 development，而在生產環境下mode 值爲 production。

因此，上述代碼就需要進行些微修改，如下所示：

Javascript

// 項目發佈階段需要用到的 babel 插件
const prodPlugins = []
// 判斷編譯模式爲生產環境
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    ...prodPlugins
  ]
}