初识webpack

[dark9wesley]

为什么要使用webpack？

由于前端项目日渐复杂，直接编写html、css、js会导致开发缓慢，大型项目下也不便于维护。

开发者为了快速开发会选择框架，例如react、vue、scss等，也会使用新的JS语法。

使用这些框架、语法编写的源代码，浏览器是无法运行的，所以需要工具帮助转译。

这就是webpack的作用，帮助我们把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码， 包括以下内容：

1. 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
2. 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
3. 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
4. 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。

webpack的基础概念

webpack区分开发环境与生产环境

1. 开发环境打包命令

npx webpack [入口文件] --mode=development

2. 生产环境打包命令

npx webpack [入口文件] --mode=production

在以上两种使用命令行的打包方式，可以通过设置mode来指定打包模式

开发模式下，webpack默认只负责打包，不会压缩文件。

生产模式下，webpack默认会打包并压缩。

另外，webpack本身功能较少，只能处理js和json资源。

为了让webpack支持更多类型的资源和功能，我们就需要学习如何配置webpack。

webpack的基础配置

用命令行的形式打包，不但不方便而且没法指定多种配置，下面介绍如何使用配置文件的形式进行打包。

首先webpack有5大核心，分别是：

1. entry（入口）
   指示webpack从哪个文件开始打包
2. output（输出）
   指示webpack打包后的文件输出到哪去，如何命名等。
3. loader（加载器）
   webpack本身只能加载js、json，其他资源需要借助loader才能解析。
4. plugin（插件）
   扩展webpack的功能
5. mode（模式）
   主要是production和development两种模式

在项目根目录下，创建配置文件并命名为webpack.config.js，wepack在打包时会自动识别。

文件代码如下所示：

const path = require('path')

module.exports = {
  // 入口
  entry: './src/index.js',

  // 输出
  output: {
    //文件的输出路径
    //__dirname nodejs的变量，代表当前文件的文件夹位置
    path: path.resolve(__dirname, 'dist'),

    //文件名
    filename: 'main.js'
  },
  // 加载器
  module: {
    rules: [
      // loader的配置
    ]
  },
  // 插件
  plugins:  [
    // plugin的配置
  ],
  // 模式
  mode: 'devepopment',
}

接下来介绍一下webpack常用的一些loader

webpack常用loader