webpack初识（webpack是什么？webpack有哪些功能？）

2022-06-12 02:09:35

webpack简介

webpack是基于模块化的打包（构建）工具，它把一切视为模块（js、css、图片）

它通过一个开发时态的入口模块为起点，分析出所有的依赖关系，然后经过一系列的过程（语法转换、资源压缩、模块合并），最终生成运行时态的文件。

webpack的作用

代码转换：将TypeScript编译成Javascript，将SCSS编译成CSS等。
文件优化：压缩Javascript、CSS、HTML代码，压缩合并图片等。
代码分割：提取多个页面的公共代码，提取首屏不需要执行部分的代码让其异步加载。
模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件。
自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。

webpack的安装

webpack通过npm安装，它提供了两个包：

webpack：核心包，包含了webpack构建过程中要用到的所有api
webpack-cli：提供一个简单的cli命令，它调用了webpack核心包的api，来完成构建过程

安装方式：

全局安装：可以全局使用webpack命令，但是无法为不同项目对应不同的webpack版本(npm install -g)
本地安装：推荐，每个项目都使用自己的webpack版本进行构建(npm install -D)

webpack使用

全局的webpack：

webpack

本地的webpack：

npx webpack

默认情况下，webpack会以./src/index.js作为入口文件分析依赖关系，打包到./dist/main.js文件中

通过--mode选项可以控制webpack的打包结果的运行环境

区分环境

有些时候，我们需要针对生产环境和开发环境分别书写webpack配置

为了更好的适应这种要求，webpack允许配置不仅可以是一个对象，还可以是一个函数

npx webpack --env.prod

// webpack.config.js
module.exports = env => {
    if(env && env.prod) {
      return {
        mode: ‘production‘,
        devtool: ‘none‘
      }
    }else {
      return {
        mode: ‘development‘,
        devtool: ‘source-map‘
      }
    }
}

这样一来，我们就可以在命令中指定环境，在代码中进行判断，根据环境返回不同的配置结果。