使用rimraf dev启动时删除dist目录

适用 vue 2.x vue 3.x已经会在启动时自动删除dist目录

webpack.dev.conf.js

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const rm = require('rimraf')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
//删除dist目录
rm(path.resolve(__dirname, '../dist'),err =>{
  if(err) throw err
})
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,
  // these devServer options should be customized in /config/index.js
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ]),
  ]
})
module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port
      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))
      resolve(devWebpackConfig)
    }
  })
})

vue修改dist目录

前后端分析之后,前端 打包处理 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持Devmax。 

vue项目中使用rimraf dev启动时删除dist目录方式的更多相关文章

  1. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  2. iOS推送通知适用于Dev而不是Enterprise Distribution

    本网站上没有其他问题,我已经能够找到实际上提出了Dev将工作的原因,但企业分布不会.为什么归档总是使aps环境生产?

  3. ios – testflight库和Xcode 5没有变化现在说“ld:找不到-lTestFlight的库”

    我已经创建了几个月的应用程序,突然Xcode5不想构建它.它只是抱怨以下错误.如果我理解它可以,它会抱怨testflight,但我几周没有改变它.它完美地编译了它.我不得不说我已经尝试将AdobeADMS跟踪库添加到项目中.然后,出现链接器错误.任何提示?

  4. 如何在ios swift项目中为dev n prod使用两个不同的GoogleService-info.plist文件?

    我需要使用两个不同的GoogleService-info.plist来处理dev和prod构建,目前我只是通过在编辑方案中更改“构建配置”来分离dev和prod,但现在我需要有两个不同的.plist文件dev和prod用于处理谷歌分析,pushwoosh等,解决方法对于这种情况,您需要在Dev和Prod的项目中使用带有diffbundleid的不同Targets.之后,您可以链接GoogleSer

  5. openstack安装liberty--安装对象存储服务swift

    通常使用CACHE技術提高性能Accountservers賬戶服務,管理對象存儲中的賬戶定義。Containerservers容器服務,在對象存儲中管理容器或文件夾映……Objectservers對象服務,在存儲節點管理實際的對象,比如文件。Wsgimiddleware處理認證,通常使用OPENSTACKIdentityswiftclient為用戶提供命令行接口使用RESTAPIswift-init初始化和構建RING文件腳本swift-recon一個命令行工具,用於檢索群集的各種度量和測試信息。

  6. (Cross-)编译Swift for Raspberry PI

    Swift现在是开源的.有没有人试过编译Swift的RaspBerryPI?我开始做,但我的8GBSD卡似乎太小了;)是否可以从Ubuntu交叉编译?写Swift打开你最喜欢的文本编辑器,编写一个程序并保存它:编译它并运行它:而已!

  7. Swift 3 dev快照中的POST请求给出了“对成员’dataTask的模糊引用(with:completionHandler :)’

    编辑:我注意到有人在我之后写了这个问题的副本.这里的答案是更好的答案.使用URLRequest结构.在Xcode8中工作正常:另外,出现此错误的原因是URLSessionAPI具有相同的名称方法,但每个都采用不同的参数.因此,如果没有明确的演员,API将会混淆.我认为这是API的命名错误.发生此问题,代码如下:

  8. 针对不同环境的不同Android构建

    我希望能够构建和安装我的应用程序的多个版本(同时),针对不同的环境,如开发,暂存和生产.AndroidManifest.xml中的软件包名称似乎是这里的主要障碍,因为它是唯一标识应用程序的内容.我认为可以简单地在com.mydomain.prod,com.mydomain.staging和com.mydomain.dev之间切换或某种类似的约定,但到目前为止,我还没有运气的包装结构对于这种方法.我

  9. android – 如何在Google Play商店中打开开发者页面(market://)

    ),但我在AndroidDeveloper页面上找不到它.解决方法您只需调用market://dev?id=xxx即可例如.:我希望,这适合您的需求!

  10. 适用于Android dev的可下载字体和“Chrome已停止”错误

    作为Oreo和支持库中新的可下载字体支持的一部分,我已经开始将功能集成到我开发的应用程序中.第一个应用程序是成功的–只需几个活动的简单应用程序.第二个应用程序没有成功.添加可下载字体(基于此资源:https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts.html)后,我在启动活动时遇到此错误:该应用

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部