webpack解读5(build。)

// 设置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
            })+'\n')
    })

})


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack 中,执行 build 命令是通过运行 webpack 命令来完成的。具体执行 build 的步骤如下: 1. 配置 webpack:首先,需要在项目根目录下创建一个 webpack 的配置文件,通常命名为 `webpack.config.js`。在该配置文件中,定义了 webpack 的入口文件、输出文件、模块解析规则、插件等。 2. 运行 build 命令:在终端中执行 `webpack` 命令,或者使用 npm 或者 yarn 的 scripts 配置,在 `package.json` 文件中定义一个 `build` 脚本,然后运行 `npm run build` 或者 `yarn build`。 3. webpack 构建过程:执行 build 命令后,webpack 会根据配置文件中的设置,按照一系列的步骤进行构建。 a. 解析入口文件:webpack 会根据配置文件中的入口文件路径,开始解析入口文件及其依赖的模块。 b. 加载模块:webpack 会根据配置文件中的模块解析规则,加载各个模块,并处理模块间的依赖关系。 c. 转换代码:webpack 会将加载的模块转换为可执行的 JavaScript 代码,通过使用各种 loader 来处理不同类型的资源文件。 d. 模块打包:webpack 将转换后的模块打包到一个或多个输出文件中,根据配置文件中的输出路径和文件名进行设置。 e. 优化和压缩:在生产环境下,webpack 会对打包后的代码进行优化和压缩,以提高性能和减少文件大小。 f. 输出结果:webpack 将最终的输出文件保存到指定的输出路径中。 通过以上步骤,webpack 会将项目中的源代码和资源文件进行处理、打包和优化,生成最终的可部署的代码文件。执行 build 命令后,即可完成项目的构建过程。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值