关于 Vue/React 的 cli 中运用 webpack 打包的原理简单解析

本文主要是介绍关于 Vue/React 的 cli 中运用 webpack 打包的原理简单解析，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

webpack、webpack-cli的打包        

关于 webpack 对前端工程中进行资源文件进行打包处理的过程中，运用到的核心插件主要是 webpack 和 webpack-cli，在 react 和 vue 对于打包各自工程中的 cli 则是进行了自定义的构建，专门用于项目打包的 cli。可简单的进行自定义运行 webpack 的编译运行文件。例如：

通过 webpack-cli 运用 webpack 进行文件资源打包压缩处理，执行script 中的脚本命令后,webpack-cli 会自动编译解析工程中的 webpack.config.js 文件，运用 webpack 对文件进行打包。

自定义编译运行文件进行打包的简单实现

引入 webpack.config.js 文件，通过webpack 去加载 webpack.config.js 文件，会创建一个compiler对象，里面内置了 run方法即可对 webpack.config.js 文件进行编译运行

build.js

const webpack = require('webpack')
const config = require('./webpack.config')const compiler = webpack(config)
compiler.run((err, stats) => {if(err) {console.error(err)} else {console.log(stats);}
})

命令行中通过 node 命令执行该文件即可实现运用 webpack 对资源文件进行打包。

这篇关于关于 Vue/React 的 cli 中运用 webpack 打包的原理简单解析的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---