背景

在暑假期间自己跟随教程学习webpack，一边学习一边记录学习笔记从0开始的webpack希望这一系列的文章可以让小伙伴们温故而知新噢~✨

章节

跟随教程一共分为6个章节呢！

首先学习的是webpack基本使用

webpack简介

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。
在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。
它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

前端资源构建工具

简单来说就是将前端一系列编译处理小工具操作整合为构建工具

静态模块打包器

webpack会从入口文件开始打包
记录依赖形成依赖关系树状图
根据依赖关系树状图引进依赖资源
形成一个个chunk(代码块)
各项处理（编译等）== 打包
处理好的资源文件输出出去 == bundle
统称为静态模块打包器

webpack五个核心概念

Entry

入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

Output

输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

Loader

Loader 让 webpack 能够去处理那些非JavaScript文件 (webpack 自身只理解JavaScript)
—— 将非JS文件编译为webpack能看懂的

Plugins

插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

Mode

模式(Mode)指示 webpack 使用相应模式的配置。

webpack的初体验

目录结构：
— webpack的初体验
— — build -> webpack打包后目录
— — — build.js -> 打包后的文件
— — src -> 源代码目录
— — — index.js -> 入口起点文件
— — — index.css -> 测试css文件
— — — data.json -> 测试json文件能否被处理 — package的配置文件

初始化步骤

npm init —— 初始化 package.json
npm i webpack webpack-cli -G —— 全局安装webpack和脚手架
npm i webpack webpack-cli -D —— 项目开发依赖安装webpack和脚手架

若全局安装后 webpack 命令无效
需要node版本<8.10.0重新全局安装

文件代码

index.js文件

/*
  index.js: webpack入口起点文件

  1. 运行指令：
    开发环境：webpack ./src/index.js -o ./build/built.js --mode=development
      webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
      整体打包环境，是开发环境
    打包成功后输出的值:
    // Hash值 -> 该文件唯一Hash值（唯一ID）

    生产环境：webpack ./src/index.js -o ./build/built.js --mode=production
      webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
      整体打包环境，是生产环境

*/
// import './index.css';

// import data from './data.json';
// console.log(data);

function add(x, y) {
  return x + y;
}

console.log(add(1, 2));

index.css文件

html,
body {
  height: 100%;
  background-color: pink;
}

data.json文件

{
  "name": "jack",
  "age": 18
}

编译打包应用

运行指令

开发环境指令：

webpack src/js/index.js -o build/js/built.js --mode=development

功能：

webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的语法。

生产环境指令：

webpack src/js/index.js -o build/js/built.js --mode=production

功能：

在开发配置功能上多一个功能，压缩代码。

结论

1. webpack 能够编译打包 js 和 json 文件。
1. 能将 es6 的模块化语法转换成浏览器能识别的语法。
1. 能压缩代码。
1. 不能编译打包 css、img 等文件。
1. 不能将 js 的 es6 基本语法转化为 es5 以下语法。

结尾

下一章节 - webpack 教程「二.开发环境配置」- 大大的小屋

学习教程：Webpack4.2 -2020年

webpack 教程「一.基本使用」

背景

章节