webpack - 学习笔记

webpack学习笔记。

引子

昨天小伙伴一面阿里，面试官上来就webpack三连，直接问蒙。对于我们这些搬砖仔，平时项目一般都是直接开脚手架，根本没想到去碰webpack，即使需要配插件，也是按照官方文档照搬。不过，该学的还是得学。

介绍

webpack大家应该很熟悉了，没用过肯定见过。简单的讲就是一个静态模块打包器，递归地构建项目依赖，然后打包输出。webpack可以自动的为我们打包项目，同时还能引入一些插件完成辅助功能，最终实现前端工程化。

安装:

yarn webpack webpack-cli --save-dev

安装成功后直接在项目目录新建一个配置文件webpack.config.js，内容类似于这样:

'use strict'

const path = require('path');

module.exports = {
  entry: {
    index: './src/app.js',
  },
  output: {
    path: path.join(__dirname,'dist'),
    filename: 'app.js'
  },
  mode: 'production',
};

概念

webpack有四个核心概念，分别是入口 (entry)、出口 (output)、加载器 (loader)、插件 (plugins)，下面一一介绍:

入口 (entry)

入口可以理解为打包的起点，webpack从入口开始，首先找到入口文件的相关依赖，再依次递归查找整个项目的依赖。入口可以有一个或者多个。

module.exports = {
  entry: '.src/app.js'  //单入口
};

module.exports = {
  entry: {  //多入口
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

出口 (output)

出口告诉webpack将打包后的文件输出到哪里，以及如何命名这些文件。

const path = require('path');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),  //输出到 dist 文件夹
    filename: 'bundle.js'  //重命名为 bundle.js
  }
};

加载器 (loader)

webpack自身只能处理JS文件，但是项目中肯定不只有JS。这时候就要用到加载器了，通过它可以将其他类型的文件转换为webpack能够处理的模块，例如CSS、图片、文件。

const config = {
  module: {
    rules: [
      { 
        test: /\.scss$/,  //正则表达式匹配 CSS 文件
        use: ['style-loader', 'css-loader', 'sass-loader']  //依次使用三个 loader，注意先后顺序
      }
    ]
  }
};

插件 (plugins)

加载器只是简单地被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。例如打包优化、压缩、变量重定义等等。

模式 (mode)

顺带提一下模式，我们可以使用模式来定义开发环境，development或production二选一，从而在不同的环境下定义不同的执行逻辑。

module.exports = {
  mode: 'production'  //定义生产环境
};

菜单

作为第二问，面试官肯定会让你报上常用的loader和plugins，奉上常用菜单。

Loader

• file-loader
  打包静态资源，蒋文君输出到打包文件夹中，代码中可以通过相对地址引入文件。

• url-loader
  类似file-loader，在文件很小的情况下以 base64 的方式把文件内容注入到代码中去。

• image-loader
  加载并且压缩图片文件。

• babel-loader
  将ES6代码转换为ES5代码。

• ts-loader
  编译TS文件并打包生成ES5代码。

• eslint-loader
  通过ESLint检查代码规范。

• sass-loader
  将scss文件编译为CSS。

• css-loader
  整理多个CSS文件之间的关系，最后打包成一个CSS文件。

• style-loader
  自动将CSS样式挂载到HTML文件的style标签中。

Plugins

• html-webpack-plugin
  自动生成HTML文件到输出目录，并且将打包后的chunk文件自动引入到HTML文件中。

• uglifyjs-webpack-plugin
  通过UglifyES压缩ES6代码

补充

别名 (alias)

在代码中导入文件的时候，使用相对路径(../../)或绝对路径(/)会很麻烦。这时候我们可以配置一个别名来简化路径，例如常见的@或~表示根目录。

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src'),  //用 @ 表示根目录，下面同理
    utils: path.resolve(__dirname, 'src/utils'),
    pages: path.resolve(__dirname, 'src/pages'),
    components: path.resolve(__dirname, 'src/components'),
    utils: path.resolve(__dirname, 'src/utils'),
  }
}

原理部分还在学习中，有时间补充……