webpack构建vue项目 基础10之打包进度条

webpack构建vue项目 基础10之打包进度条

01：webpack构建vue项目 基础10之打包进度条

package.json

  "devDependencies": {
    "zip-webpack-plugin": "^4.0.1"
  },

webpack.config.base.js

const ProgressBarPlugin = require('progress-bar-webpack-plugin') // 打包的进度条
module.exports = {
  // webpack执行打包的唯一入口
  entry: {
    // main: [path.resolve(__dirname, './src/main.js')],
    main: './src/main.js'
  },
  // 打包的输入
  output: {
    publicPath: '', //
    // 将所有依赖的模块合并输出到main_xxxxxx.js，xxxxxx为随机生成的6位hash码
    //当内容有改变时，hash会变化，防止缓存原因导致修改不更新
    filename: 'js/[name]_[contenthash:6].js',
    // 输出文件的存放路径， 必须是绝对路径
    path: path.resolve(__dirname, '../dist') // path.resolve(__dirname, "./dist")

  },
  plugins: [
    new ProgressBarPlugin()
  ]
}

npm run build 效果