Webpack笔记汇总
Posted by Mars . Modified at
一、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
- html-webpack-plugin
根据配置与模板自动生成html,把打包后的css和js文件直接引用注入到生成的html中,不用每次手动修改。
当打包后的名称里有hash字段时,会非常方便。
- Define-Plugin
定义一些常量,可以在代码中使用,打包时自动按照配置文件中的设置,替换为对应的值。
本质上是可以为代码设置一些开关,在配置中定义开闭,对应不同的打包。
应用场景:
- 根据模式设置,写不同的代码;
- 根据是否使用新特性,打包不同的代码;
- 其他根据不同开关量,进行不同选择的情形;
- progress-plugin
监控打包进度,可以为打包过程提供一个进度提示,有很多hooks可以设置。
- provide-plugin
为特定的标识符,设置一个路径。在使用这个标识符的时候无需用import或require引入,在打包的时候自动添加。
比如为$
添加jquery路径,为_
添加lodash路径。
- source-map-devtool-plugin
精细设置Source Map。
- split-chunks-plugin
根据配置,抽取公共模块,防止重复打包。
开启Source Map
有两种方式设置Source Map:
- 通过配置项的
devTool
选项配置; - 使用 SourceMapDevToolPlugin 进行配置;