Webpack笔记汇总

Posted by Mars . Modified at

一、Webpack基本概念

二、Webpack配置

三、常用 Webpack Plugins

开启Source Map

一、Webpack基本概念

二、Webpack 配置

通过外部webpack.config.js文件来配置。

1. 模式 Mode

  • development: 开发模式。
    • 会使用DefinePlugin把代码中的process.env.NODE_ENV替换为development
    • 默认开启Source Map;
    • 不会使用UglifyPlugin压缩代码;
    • 注释不会被忽略;
  • production(默认): 生产模式。
    • 会使用DefinePlugin把代码中的process.env.NODE_ENV替换为production
    • 默认无Source Map;
    • 使用UglifyPlugin压缩代码;
    • 注释被忽略;
  • none: 不使用任何优化。

三、常用 Webpack Plugins

  1. html-webpack-plugin

根据配置与模板自动生成html,把打包后的css和js文件直接引用注入到生成的html中,不用每次手动修改。

当打包后的名称里有hash字段时,会非常方便。

  1. Define-Plugin

定义一些常量,可以在代码中使用,打包时自动按照配置文件中的设置,替换为对应的值。

本质上是可以为代码设置一些开关,在配置中定义开闭,对应不同的打包。

应用场景:

  • 根据模式设置,写不同的代码;
  • 根据是否使用新特性,打包不同的代码;
  • 其他根据不同开关量,进行不同选择的情形;
  1. progress-plugin

监控打包进度,可以为打包过程提供一个进度提示,有很多hooks可以设置。

  1. provide-plugin

为特定的标识符,设置一个路径。在使用这个标识符的时候无需用import或require引入,在打包的时候自动添加。

比如为$添加jquery路径,为_添加lodash路径。

  1. source-map-devtool-plugin

精细设置Source Map。

  1. split-chunks-plugin

根据配置,抽取公共模块,防止重复打包。

开启Source Map

有两种方式设置Source Map:

  • 通过配置项的devTool选项配置;
  • 使用 SourceMapDevToolPlugin 进行配置;
Keywords: Webpack
previousPost nextPost
已经有 1000000 个小伙伴看完了这篇推文。