webpack学习 - 技术栈

1、什么是webpack

Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具（module bundler）。

它主要用于：

将多个模块（JS、CSS、图片、Vue/React 组件等）及其依赖关系分析整合，最终生成优化过的、可在浏览器中运行的静态资源（如 bundle.js、main.css 等）。=

通俗理解：

有一个前端项目，里面有：

一个主 JS 文件：main.js
很多模块：比如工具函数 utils.js、组件 header.js、样式文件 style.css、图片 l.png
你可能还用了 Vue / React / TypeScript / SCSS 等

但这些文件之间有依赖关系，而且浏览器不能直接理解某些高级语法或模块格式（比如 ES6 模块 import、export、TypeScript、Sass 等）。

这时候就需要一个工具，来：

分析各个文件之间的依赖关系
把它们打包成一个或多个浏览器能运行的文件（如 bundle.js）
处理各种资源：JS、CSS、图片、字体等
转换高级语法（如 ES6 → ES5、TypeScript → JS、Sass → CSS）
优化代码（压缩、Tree-Shaking、代码分割等）

这个工具，就是 Webpack！

2、模块化的演进过程

1、script标签

html 复制代码

 <script src=""></script>

最原始的通过javaScript文件加载方式，把每一个文件都当成一个模块；

这种原始方式加载的弊端

全局作用域会存在变量冲突
文件只能按照<script>书写的顺序加载
必须由开发者解决模块和代码库的依赖关系
项目难以维护

2、commonsJS

javascript 复制代码

require("module");
require("../module.js");
export.dostuff = function(){};
module.exports = someValue;

服务器端的 NodeJS 遵循 CommonsJS 规范，该规范核心思想是允许模块通过 require 方法来同步加载所需依赖的其它模块，然后通过 exports 或 module.exports 来导出需要暴露的接口。

优点：

服务器端模块便于重用
简单易用
NPM 中已经有非常完善的可以使用的模块包

缺点：

同步的模块加载方式不适合在浏览器环境中，同步意味着阻塞加载，浏览器资源是异步加载的
不能非阻塞的并行加载多个模块

应用：

服务端的 NodeJS
Browserify，浏览器端的 CommonsJS 实现，可以使用 NPM 的模块，但是编译打包后的文件体积较大

3、AMD

Asynchronous Module Definition 规范其实主要一个主要接口 define(id,dependencies,factory)；它要在声明模块的时候指定所有的依赖 dependencies，并且还要当做形参传到 factory 中，对于依赖的模块提前执行

javascript 复制代码

define("module",["dep1","dep2"],function(d1, d2) {
    return someExportedValue;
});
require(["module","../file.js"],function(module, file){});

优点：

适合于浏览器的异步加载
可以并行加载多个模块

缺点：

提高了开发成本，代码阅读和编写比较困难
不符合通用的模块化思想

应用：

RequireJS

4、CMD

Commons Module Definition 规范和 AMD 很相似，尽量保持简单，并与 CommonsJS 和NodeJS 的 Modules 规范保持了很大的兼容性。

javascript 复制代码

define(function(require,exports,module){
    var $=require("jquery");
    var spinning=require("./spinning");
    exports.dosomething=...;
    module.exports =...;
});

优点：

依赖就近，延迟执行
可以很容易在 NodeJS 中运行

缺点：

依赖 SPM 打包，模块的加载逻辑偏重

5、ES6模块

EcmaScript6 标准增加了 JavaScript 语言层面的模块体系定义。 ES6 模块的设计思想是尽量静态化，使编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonsJS 和 AMD 模块，都只能在运行时确定这些东西。

javascript 复制代码

import "jquery";
export function dostuff(){}
module "localModule" {}

优点：

容易进行静态分析
面向未来的 EcmaScript 标准

缺点：

原生浏览器端还没有实现该标准
全新的命令，新版的 NodeJs 才支持

3、Vue 与 Webpack 的关系

vue-cli和 Webpack，从 Vue 2.x 开始，官方提供了一个非常流行的脚手架工具：Vue CLI，它底层默认使用 Webpack 作为模块打包工具，快速搭建一个可运行的 Vue 项目。

Vue CLI 3 / 4 / 5 默认内置了 webpack 配置，一般不需要手动配置 webpack，除非有特殊需求。

从 Vue 3.x 开始，官方还推出了 Vite（一个更快的构建工具，基于 ES modules，不是 webpack），但 Webpack 仍然是很多老项目、企业级项目的主要构建工具。

4、Vue 项目中的 Webpack

使用 Vue CLI 创建项目：

bash 复制代码

vue create vue-project-test
或
vue init webpack vue-project-test

它会生成一个完整的 Vue + Webpack 项目结构，包括：

/src：源码目录
/public：静态资源
自动配置的 Webpack（隐藏在 node_modules/.bin/vue-cli-service 中）
package.json文件中包含所有要打包的程序模块的版本信息
支持：
- .vue 单文件组件
- 热更新
- dev / build 命令
- ESLint、Babel、PostCSS 等

运行：

bash 复制代码

npm run serve   # 开发模式，启动 dev server
npm run build   # 生产构建，打包优化

这些命令背后就是 Webpack 在工作，只是 Vue CLI 封装好了，一般不需要直接接触 webpack.config.js。

5、自定义安装webpack

1、命令：

bash 复制代码

npm install webpack -g
npm install webpack-cli -g

2、安装测试

bash 复制代码

webpack -v
webpack-cli -v

3、配置

创建 webpack.config.js 配置文件

entry：入口文件，指定 WebPack 用哪个文件作为项目的入口
output：输出，指定WebPack 把处理完成的文件放置到指定路径
module：模块，用于处理各种类型的文件
plugins：插件，如:热更新、代码重用等
resolve：设置路径指向

watch：监听，用于设置文件改动后直接打包

javascript 复制代码

module.exports={
    entry: "",
    output: {
        path: "", 
        filename: "" 
    }，
    module: {
        loaders: [
            {test:/\.js$/,loader:""}
        ]
    },
    plugins: {},
    resolve: {},
    watch: true
}

6、使用webpack

1、创建项目

2、在项目中创建modules目录，用于放JS模块等资源文件

3、在modules目录下创建.js模块文件，用于编写js代码

javascript 复制代码

//文件名为hello.js
//暴露一个方法:hello
exports.hello= function() {
    document.write("<div>Hello WebPack</div>");
}

4、在modules下创建一个名为 main.js 的入口文件，用于打包时设置 entry 属性

javascript 复制代码

//require导入一个块,就可以调用这个模块中的方法了
var hello =require("./hello");  //导入模块的文件名
hello.hello();

5、在项目目录下创建 webpack.config.js 配置文件，

javascript 复制代码

module.exports = {
    entry: "./modules/main.js",  //入口文件位置
    output: {
        filename: "./js/bundle.js"  //输出文件位置已经名称
    }
}

6、使用 webpack 命令打包

命令行直接输入webpack