前端学习（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
  ]
}