vue-cli中配置webpack系列文章一 ------build.js

netScorpion 发布于2019-08-26 13:51 / 1739人阅读

摘要：设置引入可以实现效果引入模块引入模块引入模块命令引入环境引入公共配置加载时显示的文本加载动画开始清空静态资源的二级目录下所有内容启动编译生产环境配置加载动画结束如果出错，抛出错误标准输出流命令行窗口向用户显示内容返回格式化结果

build.js

  // 设置process.env.NODE_ENV
  process.env.NODE_ENV = "production"
  //引入ora,可以实现loading效果
  var ora = require("ora");
  //引入webpack模块
  var webpack = require("webpack");
  //引入path模块
  var path = require("path");
  // 引入rimraf模块
  // "rm -rf"命令
  var rm = require("rimraf")
  //引入pro环境
  var webpackConfig = require("./webpack.prod.conf");
  //引入公共配置
  var config = require("../config/index");
  
  //加载时显示的文本
  var spinner = ora("building for production...");
  
  //加载动画开始
  spinner.start()
  
  var assetsPath = path.join(config.build.assetsRoot,config.build.assetsSubDirectory);
  // 清空静态资源的二级目录下所有内容
  rm(assetsPath,err=>{
      if (err) throw err
  
      //启动webpack编译生产环境webpack配置
      webpack(webpackConfig,function (eror,stats) {
          //加载动画结束
          spinner.stop();
          //// 如果出错，抛出错误
          if(eror) throw eror
  
          // process.stdout标准输出流
          // rocess.stdout.write命令行窗口向用户显示内容
          // stats.toString(options)返回格式化结果
          process.stdout.write(stats.toString({
                  colors: true,
                  modules: false,
                  children: false,
                  chunks: false,
                  chunkModules: false
              })+"
")
      })
  
  })

GPU云服务器云服务器系列一 webpack cdn配置 webpack配置cdn webpack常用配置项

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109654.html

vue-cli解析

摘要：在中，设置了一些配置，代码如下通过它的注释，我们可以理解它在中配置了静态路径本地服务器配置项等参数。下面还有一个的对象，它是在本地服务器启动时，打包的一些配置，代码如下其中包括模版文件的修改，打包完目录之后的一些路径设置，压缩等。前言这段时间，算是空出手来写几篇文章了。由于很久都没有时间整理现在所用的东西了，所以，接下来会慢慢整理出一些文档来记录前段时间的工作和生活。这篇文章的主...

KunMinX 2019-08-21 18:24 评论0 收藏0
vue学习系列（二）vue-cli

摘要：一介绍是官方提供的脚手架，用来快速建立项目。标识项目名称，这个你可以根据自己的项目来起名字。初始化完成之后，进入安装目录，必须先安装项目依赖，否则无法运行。源文件需要注意的是是入口文件，下的是路由文件，文件是组件文件。一.介绍 vue-cli是官方提供的脚手架，用来快速建立项目。二.安装 npm install vue-cli -g//全局安装三.初始化项目 vue init ...

baishancloud 2019-08-26 11:50 评论0 收藏0
手摸手，带你用vue撸后台系列一(基础篇)

摘要：详细具体的使用可以见文章手摸手，带你优雅的使用。为了加速线上镜像构建的速度，我们利用源进行加速并且将一些常见的依赖打入了基础镜像，避免每次都需要重新下载。完整项目地址：vue-element-admin系类文章二：手摸手，带你用vue撸后台系列二（登录权限篇）系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列四(vueAdmin 一...

xiaotianyi 2019-08-22 11:03 评论0 收藏0
webpack配合vue.js实现完整的单页面demo

摘要：本篇文章主要是我在开发前研究了的单页面应用，因为需要用到的，所以确保安装了，建议官网安装最新的稳定版本。本文章只是和大家探讨怎么利用配合做一个单页面应用，具体关于里面的内容怎么写并不在本篇文章的介绍范围。本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用，因为需要用到node的npm，所以确保安装了node，建议官网安装最新的稳定版本。并且在项目中需要加载一些np...

2450184176 2019-08-19 18:35 评论0 收藏0
webpack开发与生产环境配置

摘要：豹哥对于刚开始小白的自己虽然现在也白知无不谈，而且回复超快超认真。这里真的很感谢豹哥。是项目启动时的一些文件，如的配置文件开发环境服务配置文件一些简单工具函数等等。是关于整个项目的环境配置包括开发与生产。前言作者去年就开始使用webpack, 最早的接触就来自于vue-cli。那个时候工作重点主要也是 vue 的使用，对webpack的配置是知之甚少，期间有问题也是询问大牛 @吕大...

afishhhhh 2019-08-20 18:32 评论0 收藏0