webpack - 学习笔记

引子

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

介绍

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

安装:

1
yarn webpack webpack-cli --save-dev

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
'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从入口开始,首先找到入口文件的相关依赖,再依次递归查找整个项目的依赖。入口可以有一个或者多个

1
2
3
module.exports = {
entry: '.src/app.js' //单入口
};
1
2
3
4
5
6
module.exports = {
entry: { //多入口
app: './src/app.js',
vendors: './src/vendors.js'
}
};
出口 (output)

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

1
2
3
4
5
6
7
8
const path = require('path');

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

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

1
2
3
4
5
6
7
8
9
10
const config = {
module: {
rules: [
{
test: /\.scss$/, //正则表达式匹配 CSS 文件
use: ['style-loader', 'css-loader', 'sass-loader'] //依次使用三个 loader,注意先后顺序
}
]
}
};
插件 (plugins)

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

1
2


模式 (mode)

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

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

菜单

作为第二问,面试官肯定会让你报上常用的loaderplugins,奉上常用菜单。

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)

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

1
2
3
4
5
6
7
8
9
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'),
}
}

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

查看评论