这是我参与「第四届青训营 」笔记创作活动的第6天，今天学习的是构建webpack知识体系。根据老师授课内容，本文的角度主要从什么是webpack和如何使用webpack展开。
webpack是什么
前端项目由各种各样的资源构成，js css html以及各种静态文件现在又有了如sass less这样的预编译css，以及ts这种js的超集语言，以及各个框架比如vue 和 jsx tsx等等文件构成，种类繁多的资源文件组织起来非常繁琐，在像webpack之类的这种自动化打包编译工具出现之前，只能手动管理，并且还很难支持新的语言特性如ts sass less等工具，这些问题都对开发效率有很大的影响，为了解决这样的问题，webpack这类工具就产生了。
webpack本质上是一种前端资源编译、打包工具。它可以做到以下功能
- 多份资源文件打包成一个Buddle
- 支持Babel、eslint、ts、less、sass
- 支持模块化处理css、图片等资源文件
- 支持HMR+开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持Tree-Shaking
- 支持SourceMap.
- ……
学习使用webpack是前端工程化的必经之路，也是走向资深前端工程师不可或缺的一环。
使用webpack
webpack使用各种loader babel plugin将各种前端资源文件打包成浏览器可以识别的bundle.js文件,所以使用webpack的过程就是学会熟悉使用webpack各种配置项配置loader babel 和plugin。
基本使用
- 安装脚手架
npm i -D webpack webpack-cli
- 编辑配置文件wbpack.config.js
const path = require("path");
module.exports = {
entry: "./index.js",
output: {
filename: "[name].js",
path: path.join(__dirname, "./dist"),
},
mode: "development",
};
- 执行编译命令
npx webpack
- 生产环境打包下的代码如下
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
/******/ (() => { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ "./index.js":
/*!******************!*\
!*** ./index.js ***!
\******************/
/***/ (() => {
eval("console.log(\"hhhhh\");\r\n\n\n//# sourceURL=webpack:///./index.js?");
/***/ })
/******/ });
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval devtool is used.
/******/ var __webpack_exports__ = {};
/******/ __webpack_modules__["./index.js"]();
/******/
/******/ })()
;
核心流程
- webpack从entry入口文件开始启动编译流程。
- 依赖解析，对于文件中出现的import require语句找到依赖项。
- 资源解析，根据module配置项使用loader babel等配置将非js文件转为js内容，2、3递归调用直至所有内容解析完毕。
- 资源合并打包成一个可以在浏览器上可运行的bundlejs文件。
使用loader
以使用css loader为例，webpack只能识别js内容，遇到像css这种非js文件需要先通过对应的loader将非js文件转为js文件。loader的使用需要在配置项module中处理，使用如下：
- 先安装对应loader
npm install --save-dev style-loader css-loader
- 配置loader规则
- test是匹配文件
- use 匹配到的文件使用什么loader
const path = require("path");
module.exports = {
entry: "./index.js",
output: {
filename: "[name].js",
path: path.join(__dirname, "./dist"),
},
module: {
rules: [
{
test: /\.css/i,
use: ["style-loader", "css-loader"],
},
],
},
mode: "development",
};
使用babel
babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。这里以解析es6的类语法为例使用
- 安装babel依赖
npm i -D @babel/core @babel/preset-env babel-loader
- 修改配置
const path = require("path");
module.exports = {
entry: "./index.js",
output: {
filename: "[name].js",
path: path.join(__dirname, "./dist"),
},
module: {
rules: [
{
test: /\.css/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.js?$/,
use: [
{
loader: "babel-loader",
options: {
presets: [["@babel/preset-env"]],
},
},
],
},
],
},
mode: "development",
};
使用插件
这里以自动生成HTML的plugin使用为例
- 安装依赖
npm i -D html-webpack-plugin
- 修改配置文件
const path = require("path");
const HTMLWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./index.js",
output: {
filename: "[name].js",
path: path.join(__dirname, "./dist"),
},
module: {
rules: [
{
test: /\.css/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.js?$/,
use: [
{
loader: "babel-loader",
options: {
presets: [["@babel/preset-env"]],
},
},
],
},
],
},
plugins: [new HTMLWebpackPlugin()],
mode: "development",
};
学习路径
新手向掌握以下知识点
webpack的三个等级
