nuxt build中extends的使用, 如加载plugin

起因:

为什么要解决这个问题 , 因为 我想在nuxt中使用 UglifyJsPlugin 去除打包时产生的console 但是这个插件有点问题 , 就是在开发环境中使用的话, 我更改了页面的数据, 它导致热更新非常的缓慢, 大概要30s左右,
而我不用这个插件的热跟新大概在3s左右, 这个就严重影响了我的开发效率 , 所以在开发环境中我打算关闭它 , 等到 prodiction环境的时候在开启, 因为这个插件是写在plugin中的, 直接在plugin中好像没有办法区别环境
因此我选择在extends中插入 , 一开始不知道怎么在extend是使用这个, 后来解决了, 因此打算记录一下(可能这个问题有点傻)

ps: 最近使用nuxt开发的项目已经完毕了 , 有时间补下开发过程中的心得

在nuxt中使用extends

extend (config, { isDev, isClient }) {
      // Run ESLint on save
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
      if (isDev && isClient) {
        config.devtool = 'eval-source-map'
      }
      if (isDev) {
        config.plugins.push(
          new UglifyJsPlugin({
            uglifyOptions: {
              compress: {
                // warnings: ({ isDev }) => isDev? false: true,
                // drop_console: configNODE_ENV,
                drop_console: configHaveConsole,
              }
            }
          }) 
        )
      }

为什么能够这样使用, 其实它可以对应vue中的webpack操作 config对应的是webpackConfig, 就是在这个rules插入

image

那么插件的插入就比较好理解了 相当于直接在plugin数据中插入, 但是我可以区分环境了

image