起因:
为什么要解决这个问题 , 因为 我想在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
