构建Webpack知识体系 | 青训营笔记

还有头发的萝卜头
85 阅读3分钟

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

笔记大纲

  1. 什么是Webpack
  2. Webpack打包核心流程
  3. 使用Webpack
  4. 个人总结
  5. 参考资料

详细介绍

什么是Webpack

前端项目由资源构成，但是手动管理资源太繁琐，于是就出现了很多工程化工具。

gj.png

图片来源：字节跳动青训营 构建Webpack知识体系

Webpack本质上是一种前端资源编译、打包工具

wb.png

图片来源：字节跳动青训营 构建Webpack知识体系

使用Webpack

示例

1.安装

npm i -D webpack webpack-cli

2.编辑配置文件（webpack.config.js文件）

在webpack.config.js文件中，配置webpack，入口处:main,js,声明产出口，文件名：[name].js，路径：path.join(__dirname, "./dist"), moudle规则声明：test: /\.css/i ,use: ['style-loader', 'css-loader'，'less-loader']

module.exports = {
  entry: 'main.js',
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "./dist")
  },
  module: {
    rules:[{
      test: /\.less$/i,
      use: ['style-loader', 'css-loader', 'less-loader']
    }]
  }
}

3.执行编译命令

npx webpack

sy.png

核心流程

  1. 入口处理：从'entry'文件开始，启动编译流程
  2. 依赖解析：从'entry'文件开始，根据'require'or'import'等语句找到依赖资源
  3. 资源解析：根据'module'配置，调用资源转移器，将png、css等非标准js资源转义为js内容
  4. 资源合并打包: 将转义后的资源内容合并打包为可直接在浏览器运行的js文件 hx.png

图片来源：字节跳动青训营 构建Webpack知识体系

如何使用webpack

关于Webpack的使用方法基本都围绕 配置 展开， 这些配置可分为两大类。
流程类：作用于流程中某个或若干个环节，直接影响打包效果的配置项。
工具类：主流程之外，提供更多工程化能力的配置项。

wjjg.png

图片来源：字节跳动青训营 构建Webpack知识体系

1.声明入口'entry'

在webpack.config.js文件中，配置webpack，入口处:src/index.js

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

2.声明产出口'output'

在webpack.config.js文件中，配置webpack，声明产出口，文件名：[name].js，路径：path.join(__dirname, "./dist") 

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

3.运行'npx webpack'

成功示例

yx.png

使用webpack 处理CSS

目录结构

mulu.png

图片来源：字节跳动青训营 构建Webpack知识体系

index.js文件

const styles = require('./index.css');
import styles from './index.css'

1.安装Loader

nom add -D css-loader style-loader

2.添加module处理css文件

在webpack.config.js文件中，配置webpack，入口处:src/index,声明产出口，文件名：[name].js，路径：path.join(__dirname, "./dist"), moudle规则声明：test: /\.css/i ,use: ['style-loader', 'css-loader']

const path = require("path");

module.exports = {
  entry: './src/index',
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "./dist")
  },
  module: {
    rules:[{
      test: /\.css/i,
      use: ['style-loader', 'css-loader']
    }]
  }
}

3.执行 npx webpack

css.png

图片来源：字节跳动青训营 构建Webpack知识体系

使用webpack 生成Html

文件结构

htjg.png

1.安装依赖 npm i -D html-webpack-plugin

npm i -D html-webpack-plugin

2.声明产物出口output

在webpack.config.js文件中，配置webpack，入口处:src/index,声明产出口，文件名：[name].js，路径：path.join(__dirname, "./dist"), plugins声明：
[new HtmlWebpackPlugin()]

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: 'src/index',
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "./dist")
  },
  plugins: [new HtmlWebpackPlugin()]
}

3.执行npx webpack

ht.png

图片来源：字节跳动青训营 构建Webpack知识体系

个人总结

重点：

  1. Webpack打包核心流程
  2. 使用Webpack

难点：

使用Webpack

思考

学习了本节课，我初步了解和会使用了webpack,我认为本节课应该思考，我们为什么要使用webapck，应该怎么使用webpack，webpack有什么优点和缺点（优点当然是方便打包），怎么更简单地使用webpack？后续怎么学习webpack，我认为这些都是应该思考的内容，希望在接下来的学习中能把这些问题解决。

参考资料

来自：字节跳动青训营 构建Webpack知识体系课程

avatar
文章
阅读
粉丝