这是我参与「第四届青训营」笔记创作活动的第2天

一、什么是WebPack

一个前端项目，通常是由非常多的资源构成。图片,js,css,JSX...都可以成为一个前端项目的资源。如何管理这些资源成为了一个难题。大概在10年前，我们会在html中手动指定资源文件路径来手动管理资源文件。但是，手动管理资源会有很多不方便的地方。比如

存在大量资源时插入，修改资源链接过程繁琐
资源文件存在依赖时，必须严格按照顺序书写
开发环境与生产环境一致，难以使用TS，JS新特性
JS，图片，CSS资源管理模型不一致

这些问题对于开发效率，开发规模都有非常大的影响。为了解决这些存在的问题，我们需要一个资源管理、打包、编译的工具。Webpack就是这样一个资源编译、打包工具。

二、使用Webpack

示例

安装Webpack

通过NodeJs软件包管理工具npm 我们可以很轻松地安装Webpack。使用npm i - D webpack webpack-cli来安装WebPack。

编辑配置文件

下面是一个简单的配置文件示例

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: [name].js,
    filename: path.join(__dirname, './dist')
  }
};

我们会在下面的章节中详细介绍配置文件。

执行编译命令

使用npx webpack就可以按照配置文件的内容来编译、打包前端项目。

WebPack 配置

Webpack的配置大致可以分为两类

流程类：作用于流程中某个或者若干个环节，直接影响打包效果
工具类：主流程之外，提供更多的工程化能力

流程类配置

流程类配置由输入、模块解析、输出、后处理组成，下面会分别举例介绍各部分的配置方法。

输入

使用entry可以指定项目的入口文件。

entry: './src/main.js',

模块解析使用resolve于配置模块如何被解析。 resolve 是一个对象，里面有非常多属性，这里我们只看两个比较常见的属性。
- resolve.extensions
  
  示例：

resolve:{ extensions:['.js','.jsx','.ts','.tsx'] }

Webpack在处理import时，如果没有加扩展名，会根据extensions中的扩展名顺序去寻找要import的文件。

resolve.alias

示例：

resolve:{ alias:{ utils:path.resolve(__dirname,'./a complex path/utils') } }

配置了alisa之后，我们就可以直接使用 import utils 来代替原来十分复杂的路径。

模块转译

我们可以使用module来处理外部资源。

处理CSS示例：

module:{
    rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      }
    ]
}

首先使用test选项来匹配需要处理的文件，然后使用use来定义处理这种文件的loader序列。

后处理

示例：

mode:  'development'

使用mode可以指定Webpack使用相应模式的内置优化，一般有development和production两个选项。使用development选项一般不会对代码进行优化，而使用production选项则会对代码进行去除没有使用的模块等优化。

工具类配置

工具类配置一般会在流程类配置之前进行处理。工具类配置主要是为了提高开发效率或者是优化编译过程而存在。比如Webpack内置了tree-shaking工具，只要使用production mode，并且配置了optimization.usedExports : true就会自动去除代码中没有被使用的代码或模块。

Webpack｜ 青训营笔记