起因:
為什么要解決這個問題 , 因為 我想在nuxt中使用 UglifyJsPlugin 去除打包時產(chǎn)生的console 但是這個插件有點問題 , 就是在開發(fā)環(huán)境中使用的話, 我更改了頁面的數(shù)據(jù), 它導(dǎo)致熱更新非常的緩慢, 大概要30s左右,
而我不用這個插件的熱跟新大概在3s左右, 這個就嚴(yán)重影響了我的開發(fā)效率 , 所以在開發(fā)環(huán)境中我打算關(guān)閉它 , 等到 prodiction環(huán)境的時候在開啟, 因為這個插件是寫在plugin中的, 直接在plugin中好像沒有辦法區(qū)別環(huán)境
因此我選擇在extends中插入 , 一開始不知道怎么在extend是使用這個, 后來解決了, 因此打算記錄一下(可能這個問題有點傻)
ps: 最近使用nuxt開發(fā)的項目已經(jīng)完畢了 , 有時間補(bǔ)下開發(fā)過程中的心得
在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,
}
}
})
)
}
為什么能夠這樣使用, 其實它可以對應(yīng)vue中的webpack操作 config對應(yīng)的是webpackConfig, 就是在這個rules插入
image
那么插件的插入就比較好理解了 相當(dāng)于直接在plugin數(shù)據(jù)中插入, 但是我可以區(qū)分環(huán)境了
image
