【webpack】使用webpack api打包一个最简单的js资源

最新推荐文章于 2023-03-02 16:40:57 发布

原创

最新推荐文章于 2023-03-02 16:40:57 发布

· 986 阅读

1 ·

版权

文章标签：

#webpack #javascript #前端

简单了解一下webpack

本质上，webpack是一个用于现代javascript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将项目中所需要的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。

依赖图
每当一个文件依赖另一个文件时，webpack都会将文件视为直接存在依赖关系，这使得webpack可以获取非代码资源，如images或web字体等，并会把它们作为依赖提供给应用程序。
什么是webpack cli？
通过命令行的方式调用webpack，被称为webpack cli.
当我们在终端执行webpack命令时发生了什么
1. 调用执行webpack包对应的bin目录下的webpack.js文件，紧接着再调用webpack-cli包
2. 调用执行webpack-cli包对应的bin目录下的cli.js文件，然后再继续调用webpack包。
3. 调用执行webpack包的API进行打包，如create-react-app的react-scripts：

// create-react-app 通过调用 webpack api 来打包
function build(previousFileSizes) {
   
  console.log('Creating an optimized production build...');
  const compiler = webpack(config);
  return new Promise((resolve, reject) => {
   
    compiler.run((err