Webpack Project

--- theme: v-green highlight: monokai --- ## webpack 核心概念 - **entry（入口）:** Webpack创建bundle的起点。默认值是`./src/index.js`。 - **output（输出）:** 告诉 webpack在哪里**输出**它创建的bundles，以及如何命名这些文件。默认值是`./dist/main.js`。 - **module（模块）:** 在 webpack中，模块指的是构建在你的项目中的所有**依赖项**。这些模块会被映射到bundle中。 - **bundle（包）:** 由 webpack打包的一组模块。 - **chunk（块）:** webpack构建的**中间产物**，用于管理bundles。一个chunk可以由多个模块组成，一个模块可以属于多个chunk。当你使用代码分割或加载器时，会用到chunks。 - **loader（加载器）:** webpack本身只能处理JavaScript和JSON文件。**加载器让 webpack能够处理其他类型的文件**，并将它们转换为有效的模块。 - **plugin（插件）:** 插件用于执行范围更广泛的任务。从打包优化和压缩，到重新定义环境变量等等，插件的功能非常强大。 ## webpack 动手尝试我们动手实现一遍基本的 webpack 项目的设置流程，对 webpack 不熟悉的读者可以打开一个新的空文件夹跟着操作一下： 1. **初始化项目**：在你的项目目录中打开终端，然后运行 `npm init -y` 来初始化你的项目。
`-y` 表示 yes，即在初始化过程中所有的选项都选默认值，如果你想自定义配置可以根据文档修改 `package.json` 文件——[package.json | npm Docs (npmjs.com)](https://docs.npmjs.com/cli/v9/configuring-npm/package-json) 2. **创建 `src/index.js`**：创建 `src` 文件夹，在 `src` 目录下创建一个 `index.js` 文件，你可以在这里写入一些JavaScript代码。 ```js console.log('Hello, Webpack!'); ``` 3. **创建 `public/index.html`**：在 `public` 目录下创建一个 `index.html` 文件，然后添加以下HTML代码： ```html Webpack Project ``` 4. **创建 `webpack.config.js` 并填入配置**：在项目根目录下创建一个 `webpack.config.js` 文件，然后添加以下 webpack 配置： ```js const path = require('path'); module.exports = { mode: 'development', entry: './src/index.js', output: filename: 'main.js', path: path.resolve(__dirname, 'dist'), }, }; ``` 5. **安装 webpack 和 webpack cli**：运行 `npm install --save-dev webpack webpack-cli` 来安装 webpack 和 webpack cli。 7. **配置 build 命令为 webpack**：在你的 `package.json` 文件中，将 “scripts” 部分修改为以下内容： ```json "scripts": { "build": "webpack" } ``` 7. **执行 npm run build 完成打包构建**：最后，运行 `npm run build` 来打包你的项目。如果成功，你应该会在 `dist` 目录下看到一个名为 `main.js` 的文件。输出的 **main.js** 文件内容，这里笔者为了方便理解，删去了原来的注释并做了新的逐行解释： ```js (() => { // 这是一个立即执行的箭头函数，webpack的启动函数。 var __webpack_modules__ = { // 这是一个对象，其中包含了所有 webpack 打包的模块。 // 这是模块的唯一标识符，对应于你的源代码文件。 './src/index.js': () => { // 这是一个函数，包含了模块的代码。 eval( "console.log('hello webpack');\r\n\n\n//# sourceURL=webpack://my-project/./src/index.js?" ); // 这是模块的源代码，被包裹在一个eval函数中。eval函数会执行传入的JavaScript代码字符串。 }, }; var __webpack_exports__ = {}; // 这是一个对象，用于存储模块的导出结果。 __webpack_modules__['./src/index.js'](); // 这行代码加载并执行入口模块。 })(); ``` 在浏览器中运行我们的 `index.html` 文件。我们先前通过 `` 引入了这个文件，可以看到其中其实是一个**立即执行函数（IIFE）**，所以一旦这个文件被加载，它就会立即执行。如果成功，可以看到控制台打印出了 `'hello webpack'`。至此我们就通过默认的配置，以最简单的形式过了一遍 webpack 工作的基本流程。 ### webpack devtool 前面一部分提及到，笔者删掉了一部分注释： > * 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/). 这部分注释告诉你，Webpack在开发模式下默认使用了"eval"作为devtool。“eval” devtool会使用 `eval()` 函数来创建浏览器开发者工具中的单独源文件。如果你想要阅读输出文件，或者寻找适合生产环境的输出文件，你可以选择一个不同的devtool或者通过设置 `devtool: false` 来禁用默认的devtool。 [Devtool | webpack 中文文档](https://www.webpackjs.com/configuration/devtool/#root) **Devtool** 控制是否生成，以及如何生成 **source map**。我们给 `webpack.config.js` 中添加一项配置属性 `devtool: source-map`，观察打包后的结果发现 `dist` 目录下多出了一个 `main.js.map` 文件： ```json { "version": 3, "file": "main.js", "mappings": ";;;;;AAAA", "sources": [ "webpack://my-project/./src/index.js" ], "sourcesContent": [ "console.log('hello webpack');\r\n" ], "names": [], "sourceRoot": "" } ``` 并且 `main.js` 中的内容也发生了变化： ```js /******/ (() => { // webpackBootstrap var __webpack_exports__ = {}; /*!**********************!*\ !*** ./src/index.js ***! \**********************/ console.log('hello webpack'); /******/ })() ; //# sourceMappingURL=main.js.map ``` 先说这个新出现的 `.map` 文件，它是一个存储着代码位置信息的文件。Source Map的作用就在于能够帮你定位到错误的代码在那个文件哪一行。具体来说，当你的代码出现错误时，浏览器控制台通常会显示出错的位置。但是，如果你的代码被压缩或转换（比如从ES6转换到ES5），那么显示的错误位置将会是转换后的代码，而不是你原始的源代码。这时候，Source Map就派上用场了。有了Source Map，浏览器在报错时可以直接显示出错源代码的位置，而不是转换后的代码。在webpack中，如果devtool被设置为source-map，那么webpack会为每个模块生成对应的.map文件。并且在打包后的代码最后一行会有个注释，它会指向对应的.map文件。 ⚠️使用Source Map可能会暴露你的源代码，因此通常只在开发环境中使用。在生产环境中，应该选择其他devtool配置选项，或者完全禁用它。阮一峰老师的博客详细介绍过 Source Map：[JavaScript Source Map 详解 - 阮一峰的网络日志 (ruanyifeng.com)](http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html) ### webpack loader 默认情况下，webpack 只能理解 JavaScript 和 JSON 文件。**loader 用于把其他类型的文件转换成 js 文件**。（选择将所有类型的文件转换为JavaScript，主要是因为JavaScript是浏览器原生支持的语言。在前端开发中，无论是样式表（CSS）、图片、字体文件还是JavaScript模块，最终都需要通过浏览器来解析和渲染。）这里通过引入最常见的**css-loader**，来加深大家对**loader**的理解： #### 引入 css 文件我们在 `src` 目录下新建一个 `index.css` 文件，构建一个简单的样式： ```css .test { width: 100px; height: 100px; background-color: aqua; } ``` 由于我们没有使用 MVVM 框架，所以还需要手动在 `index.html` 文件中插入这个元素： ```html

``` 那么如何引入我们的css文件呢？在正常的开发中我们只需要： ```html ``` 但这样引入的话其实不依赖于打包构建的，并且有违我们利用打包减少请求次数来提高性能的初衷——如果存在多个CSS文件，需要请求多次。我们在 `index.js` 中引入 `index.css`： ```js import './index.css'; console.log('hello webpack'); ``` 此时直接执行 `npm run build` 会报错，提示我们需要正确的**loader**来处理css文件： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5a7eb23acd4d41539e7f10161461c75d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=923&h=209&s=27011&e=png&b=403e41) #### 使用 css-loader 执行 `npm` 命令安装 `css-loader`： ```terminal npm i -D css-loader ``` 安装好以后，在 `webpack.config.js` 文件中添加**loader**的配置属性： ```js module: { rules: [ { test: /.css$/, use: ['css-loader'], }, ], } ``` 再次执行 `npm run build`，打包成功后在浏览器中运行 `index.html` 文件会发现，样式并没有生效。在控制台打开源代码中的 `index.css` 看看： ```js // Imports import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from "../node_modules/css-loader/dist/runtime/sourceMaps.js"; import ___CSS_LOADER_API_IMPORT___ from "../node_modules/css-loader/dist/runtime/api.js"; var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___); // Module ___CSS_LOADER_EXPORT___.push([module.id, `.test { width: 100px; height: 100px; background-color: aqua; } `, "",{"version":3,"sources":["webpack://./src/index.css"],"names":[],"mappings":"AAAA;IACI,YAAY;IACZ,aAAa;IACb,sBAAsB;AAC1B","sourcesContent":[".test {\r\n width: 100px;\r\n height: 100px;\r\n background-color: aqua;\r\n}\r\n"],"sourceRoot":""}]); // Exports export default ___CSS_LOADER_EXPORT___; ``` **css-loader的作用是将CSS文件转换为JavaScript模块。但是，它并不会将CSS样式应用到HTML文档中。** 这就是为什么在控制台中看到的 `index.css` 文件内容看起来像JavaScript代码。 #### 使用 stye-loader **style-loader的作用则是将css-loader处理后的结果（即CSS样式）通过创建style标签的方式添加到HTML页面上。** 这就是为什么需要在使用了css-loader之后还需要使用style-loader。这样的设计看起来有点奇怪，大多数情况下我们都需要 `css-loader` 和 `style-loader` 一起使用，为什么不合并成一个 loader 呢？Webpack 鼓励使用多个简单的、单一功能的 loader，而不是一个复杂的、多功能的 loader。这样设计的好处是可以保证每个 loader 的职责单一，也方便后期 loader 的组合和扩展。举两个例子： - **只使用`css-loader`：** 如果你想要将CSS作为字符串导入，而不是直接应用到DOM上，那么你可能只需要css-loader。例如，你可能想要在JavaScript中操作这些样式字符串，或者你可能想要在服务器端渲染(SSR)中使用它们。 - **只使用`style-loader`：** 在某些情况下，你可能已经有了一些以JavaScript模块形式存在的CSS（例如，通过某种预处理器或者构建步骤生成），并且你想要将这些样式应用到DOM上。在这种情况下，你可能只需要style-loader。安装 `style-loader`: ```terminal npm i -D style-loader ``` 在 `webpack.config.js` 文件中添加上配置： ```js module: { rules: [ { test: /.css$/, use: ['style-loader', 'css-loader'], }, ], }, ``` 这里要注意了，配置中 `rule` 里面的内容是从下到上，`use` 里面的内容从右到左执行的。此时再在浏览器中运行 `index.html` 文件会发现样式已经生效了，并且源代码中多了一个 `index.css` 文件： ```js // 导入style-loader的API，用于将样式插入到style标签中 import API from "!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"; // 导入style-loader的DOM API，用于操作DOM import domAPI from "!../node_modules/style-loader/dist/runtime/styleDomAPI.js"; // 导入style-loader的插入函数，用于将style标签插入到指定的位置 import insertFn from "!../node_modules/style-loader/dist/runtime/insertBySelector.js"; // 导入style-loader的设置属性函数，用于设置style标签的属性 import setAttributes from "!../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"; // 导入style-loader的插入style元素函数，用于创建并插入style标签 import insertStyleElement from "!../node_modules/style-loader/dist/runtime/insertStyleElement.js"; // 导入style-loader的样式标签转换函数，用于转换样式标签 import styleTagTransformFn from "!../node_modules/style-loader/dist/runtime/styleTagTransform.js"; // 导入css-loader处理后的CSS内容和命名导出 import content, * as namedExport from "!!../node_modules/css-loader/dist/cjs.js!./index.css"; // 创建一个options对象，用于配置style-loader var options = {}; // 设置样式标签转换函数 options.styleTagTransform = styleTagTransformFn; // 设置属性设置函数 options.setAttributes = setAttributes; // 设置插入函数，将style标签插入到head中 options.insert = insertFn.bind(null, "head"); // 设置DOM API options.domAPI = domAPI; // 设置插入style元素函数 options.insertStyleElement = insertStyleElement; // 调用API函数，将CSS内容和配置选项传递给它，得到一个更新函数 var update = API(content, options); // 从css-loader处理后的结果中导出所有命名导出 export * from "!!../node_modules/css-loader/dist/cjs.js!./index.css"; // 如果content有locals属性，则导出locals；否则导出undefined export default content && content.locals ? content.locals : undefined; ``` 笔者添加了一些注释方便理解，这里最关键的就是 `API` 函数，它会根据 css 内容和配置来更新 DOM。检查一下我们的页面元素会发现， `style-loader` 在 `head` 标签内创建了 `style` 标签，并把 `index.css` 的样式都写入了这个 `style` 标签中。 #### 实现一个自定义 loader 假设我们掘金的小伙伴设计了一种开发方式，以掘金的缩写 `jj` 命名了一个新的文件类型。在 `src` 目录下新建 `test.jj`，并在 `index.js` 中引入： ```js ``` 这里的设计类似于 `vue` 的单文件组件中的 `script` 标签。如果现在执行打包，也会像之前的 `css` 文件一样，提示我们需要正确的**loader**来处理 `jj` 文件。在根目录下创建一个 `loader` 文件夹来存放我们的自定义 `loader`，创建 `jj-loader.js`： ```js // 匹配