《深入浅出Webpack》学习笔记

最新推荐文章于 2024-04-10 20:21:12 发布

Louis_lan

最新推荐文章于 2024-04-10 20:21:12 发布

阅读量365

点赞数

分类专栏：前端web

本文链接：https://blog.csdn.net/liu14lang/article/details/106242897

版权

本文介绍了 Webpack 的核心概念，包括模块化思想、常见构建工具以及 Webpack 的安装和简单使用。深入探讨了 Loader 和 Plugin 的作用，展示了 DevServer 的配置与使用。还涵盖了 Webpack 的配置选项，如 Entry、Output、Module、Resolve 和 Plugin。最后讨论了 Webpack 的优化策略，如 Tree Shaking、提取公共代码和按需加载，并概述了其工作原理。

摘要由CSDN通过智能技术生成

入门

先简单地提下模块化的思想。

模块化

简单来说就是将复杂的系统分解成各个简单的子模块，便于开发和维护。

一般 JavaScript 模块化规范有 CommonJS，AMD 和 ES6 中的模块化。

CommonJS

其核心思想就是利用 require 来同步加载依赖的模块，通过 module.exports 来暴露模块的接口。

优点在于

代码可在 node.js 环境下运行
NPM 包中大部分模块都支持 CommonJS

缺点在于：无法在浏览器环境下运行，要想运行必须通过工具转换。

AMD

异步模块定义(Asynchronous Module Definition) 是以异步的方式加载模块，主要用于解决浏览器的模块化加载，比如像 require.js.

优点

可无需转换即可在浏览器环境中运行
可异步加载模块
可并行加载多个模块
可在node和浏览器环境中运行

缺点：浏览器没有原生支持 AMD，若要使用需要导入相应的包。

ES6 的模块化

它是 ECMA 提出的 JavaScript 模块化规范，是在语言层面上实现的。他将逐渐取代 CommonJS 和 AMD 规范。但是目前仍然无法运行在大部分 JavaScript 运行环境中，所以需要转换工具转成 ES5 后才能运行。

tip： CSS 样式文件中也开始支持模块化，比如 SASS, SCSS, less 等

不仅这些模块化规范需要转换工具才能运行，还有目前流行 React 中 JSX 语法和 vue 中的 template 也需要进行转换，还有当前流行 es6，typescript 也需要转换。所以随着项目越来越复杂和技术越来越新，不可避免的需要出现构建工具来统一的管理这些转换工具。

常见的构建工具

构建工具主要的工作如下：

代码转换
文件优化：压缩静态资源文件
分割代码，将公共代码分离出来
模块合并
实现热更新
自动校验
实现自动发布

主要的构建工具有（诞生的时间排序）：

Npm Script：属于 NPM 内置的功能，在 package.json 文件中的 script 对象中配置，其中每个属性对应一个 shell 命令。
Grunt：通过执行任务的方式进行构建。
Gulp：一种基于流的自动化构建工具，除了可以管理和执行任务，还能监听文件，读写文件。
Webpack：专注于构建模块化项目，在 webpack 里，一切文件都被视为模块。通过 loader 转换文件，通过 Plugin 注入钩子，最后输出有多个模块组合而成的文件。
Rollup：和 webpack 类似，他的亮点就是可以 Tree shaking，以减小输出文件大小和提高运行性能。后期 webpack 也是实现了 Tree Shaking。

选择 Webpack 的原因

可以为新项目提供一站式的解决方案
有良好的生态和维护团队
被大量使用，经受住了大家的考验。

安装

# 初始化 npm 包
npm init

# 以下三选一
# 稳定版
npm install webpack -D
# 指定版
npm install webpack@<version> -D
# 最新的体验版
npm install webpack@beta -D

请看以下 webpack 使用实例(文件都在根目录)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app"></div>
<!-- 导入webpack打包输出的文件 -->
<script src="./dist/bundle.js"></script>
</body>
</html>

show.js

function show(content){
   
  document.getElementById("app").innerText = "hello, " + content;
}

// 通过 CommonJS 规范导出show函数
module.exports=show;

main.js

// 通过 CommonJS 规范导入show函数
const show = require('./show.js')

show("webpack")

wepack.config.js

const path = require('path')

module.exports = {
   
  // javascript 执行入口文件
  entry: './main.js',
  output: {
   
    // 将所有依赖的模块合并输出到bundle.js文件中
    filename: "bundle.js",
    // 将输出文件都放到此目录下
    path: path.resolve(__dirname, "./dist")
  }
}