使用 webpack 的 node api 学习 webpack

山月

发布于 2022-11-02 16:42:55

9140

文章被收录于专栏：服务器运维笔记服务器运维笔记

在我们使用 webpack 的大部分项目中，都需要使用 webpack.config.js 来配置 webpack。

我们学习 webpack 的过程也就是学习 webpack 配置文件的过程，因此人称 webpack 配置工程师。

但「在学习过程中」，我个人不建议使用 webpack.config.js 来学习 webpack。

原因只有一个：「webpack cli 实在是太难调试了！」

1. 跳来跳去的 webpack cli

当我们执行 webpack 命令时发生了什么？

$ webpack

调用执行 webpack 包对应的 bin/webpack.js 文件，然后继续调用 webpack-cli 包
调用执行 webpack-cli1 包对应的 bin/cli.js 文件，然后继续调用 webpack 包

调用执行 webpack 包的 API 进行打包

你说，这直接调用 webpack 的 API 进行学习不更好吗？当然，仅限于学习。

除了学习，学习 webpack api 还有一些其他场景。

2. 使用 webpack api 开发

如果你需要基于 webpack 做一个脚手架，那很大可能是通过 webpack api 来完成的。

比如 create-react-app 的 react-scripts2，便是直接通过 webpack api 进行打包。

见代码3。

其它脚手架应该也是，但我没有一一验证。

3. 使用 webpack api

使用 webpack api 也特别容易，将以前 webpack.config.js 的配置，作为参数传递给 webpack 函数即可。详见文档 webpack node api4。

Q：既然直接将参数传递给 webpack 函数即可，那 webpack-cli 的主要作用岂不是读取文件？

示例如下：

const webpack = require('webpack')

const compiler = webpack({
  // webpack 的诸多配置置于此处
  entry: './index.js'
})

compiler.run((err, stat) => {

})

使用 webpack 进行学习及测试也非常方便，比如使用它测试不同 mode 对打包资源的影响：

webpack([
  {
    entry: './index.js',
    mode: 'production',
    output: {
      filename: 'main.production.js'
    }
  },
  {
    entry: './index.js',
    mode: 'development',
    output: {
      filename: 'main.development.js'
    }
  },
  {
    entry: './index.js',
    output: {
      filename: 'main.unknown.js'
    }
  }
]).run((err, stat) => {

})

4. 关于 webpack 的示例

我将所有关于 webpack 学习的示例放在了 node-examples5 中。

执行 node build.js，用以查看构建示例，而在 build.js 中，会维护 N 份 webpack 配置。

// 学习配置一
function f1 () {
  return webpack({
    entry: './index.js',
    mode: 'none',
    output: {
      iife: false,
      pathinfo: 'verbose'
    }
  })
}

// 学习配置二
function f2 () {
  return webpack({
    entry: './index.js',
    mode: 'none',
    optimization: {
      runtimeChunk: true,
    }
  })
}


// 学习配置一时，切换到 f1，学习配置二时，切换到 f2
f1().run((err, stat) => {
  // console.log(stat.toJson())
})