webpack 其它选项(Other Options)-FunTeaLearn Online Web Tutorials

webpack 其它选项(Other Options)

除了常用的配置选项外，Webpack 还提供了一些其他选项，用于进一步定制打包过程。在这个章节中，我们将介绍一些常用的其他选项。

resolve

resolve 选项用于配置模块如何解析。在这个选项中，我们可以配置模块的搜索路径、扩展名等。

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      '@': path.resolve(__dirname, 'src/')
    }
  }
}

在上面的示例中，我们配置了模块的扩展名为 .js 和 .jsx，并且设置了一个别名 @ 指向 src 目录。

optimization 选项用于配置打包优化相关的选项，比如压缩代码、代码分割等。

module.exports = {
  optimization: {
    minimize: true,
    splitChunks: {
      chunks: 'all'
    }
  }
}

在上面的示例中，我们开启了代码压缩，并且配置了代码分割的策略为 all，即将所有公共模块抽离到一个单独的文件中。

performance 选项用于配置打包性能相关的选项，比如设置资源大小的阈值等。

module.exports = {
  performance: {
    hints: 'warning',
    maxEntrypointSize: 500000,
    maxAssetSize: 300000
  }
}

在上面的示例中，我们配置了打包入口文件的大小阈值为 500KB，单个资源文件的大小阈值为 300KB，当超过这个阈值时会给出警告提示。

以上就是 Webpack 中一些常用的其他选项，通过合理配置这些选项，我们可以更好地定制我们的打包过程。

Feed
back