vue学习(四)基础入门-webpack(1)

亦凉 2023-06-10 14:25 23阅读 0赞

# 参考资料 #

**官网及文档：**

*  [WebPack官网][WebPack]
 *  [WebPack中文网][WebPack 1]
 *  [WebPack中文文档][WebPack 2]

**学习视频：**

*  [webpack深入与实战][webpack]
 *  [Vue+Webpack打造todo应用][Vue_Webpack_todo]
 *  [手把手带你掌握新版Webpack4.0][Webpack4.0]

## WebPack概念 ##

**webpack**的核心是现代JavaScript应用程序的*静态模块捆绑(打包)器*。

当webpack处理您的应用程序：分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。它会在内部构建一个[依赖关系图][Link 1]，它映射您的项目所需的每个模块并生成一个或多个*包*。

**Webpack的工作方式：**

Webpack把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用**loaders加载器**处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70][]

**为什要使用WebPack?**

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法：

*  **模块化**，让我们可以把复杂的程序细化为小的文件;
 *  类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；
 *  Scss，less等CSS预处理器
 *  ...

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack一类的打包工具的出现提供了需求。

webpack不是唯一的模块捆绑器。如果您选择使用webpack或下面的任何捆绑(打包)器\*，可阅读[捆绑(打包)器功能比较表][Link 2]来了解webpack与其他竞争对手的优劣。

## 安装WebPack ##

### 前提条件 ###

在开始之前，请确保安装了 [Node.js][] 的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。

### 本地安装 ###

要安装最新版本或特定版本，请运行以下命令之一：

npm install --save-dev webpack
    npm install --save-dev webpack@<version>

如果你使用 webpack 4+ 版本，你还需要安装 CLI。

npm install --save-dev webpack-cli

对于大多数项目，我们建议**本地安装（-dev）**。这可以使我们在引入破坏式变更(breaking change)的依赖时，更容易分别升级项目。通常，webpack 通过运行一个或多个 [npm scripts][]，会在本地 `node_modules` 目录中查找安装的 webpack：

"scripts": {
        "start": "webpack --config webpack.config.js"
    }

> 当你在本地安装 webpack 后，你能够从 `node_modules/.bin/webpack` 访问它的 bin 版本。

### 全局安装 ###

以下的 NPM 安装方式，将使 `webpack` 在全局环境下可用：

npm install --global webpack

> 不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

### 最新体验版本 ###

如果你热衷于使用最新版本的 webpack，你可以使用以下命令，直接从 webpack 的仓库中安装：

npm install webpack@beta
    npm install webpack/webpack#<tagname/branchname>

安装这些最新体验版本时要小心！它们可能仍然包含 bug，因此不应该用于生产环境。

## 核心知识 ##

## 入口 ##

**入口点entry**指示Webpack应使用哪个模块开始构建其内部的[依赖关系图][Link 1]。Webpack将找出入口点所依赖的其他模块和库（直接和间接）。

默认情况下，其值为`./src/index.js`，但您可以通过在[webpack配置中配置][webpack 1]**entry**属性来指定不同的（或多个入口点）。例如：

**webpack.config.js**

module.exports = {
      entry: './path/to/my/entry/file.js' //默认情况下，其值为`./src/index.js`
    };

> 在[入口点][Link 3]部分了解更多信息。

### 输出 ###

该**输出**属性告诉的WebPack哪里发出*束*它创建以及如何命名这些文件。它默认`./dist/main.js`为主输出文件和`./dist`任何其他生成文件的文件夹。

您可以通过`output`在配置中指定字段来配置此过程的这一部分：

**webpack.config.js**

const path = require('path');
    
    module.exports = {
      entry: './path/to/my/entry/file.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js'
      }
    };

在上面的示例中，我们使用`output.filename`和`output.path`属性告诉webpack我们的包的名称以及我们希望它发送到的位置。如果您想知道在顶部导入的路径模块，它是一个核心[Node.js模块][Node.js 1]，用于操作文件路径。

> 该`output`物业有[更多可配置的功能][Link 4]。如果您想了解它背后的概念，可以[在输出部分阅读更多内容][Link 5]。

### 加载器 ###

开箱即用，webpack只能理解JavaScript和JSON文件。**加载器**允许的WebPack处理其他类型的文件，并将其转换为有效的[模块][Link 6]，可以通过您的应用程序消耗并添加到依赖关系图。

> 请注意，`import`任何类型的模块（例如`.css`文件）的功能都是特定于webpack的功能，其他捆绑器或任务运行器可能不支持。我们认为这种语言的扩展是有保证的，因为它允许开发人员构建更准确的依赖图。

在较高级别，**加载器**在您的webpack配置中有两个属性：

1.  该`test`属性标识应转换哪个或哪些文件。
2.  该`use`属性指示应使用哪个加载程序进行转换。

**webpack.config.js**

const path = require('path');
    
    module.exports = {
      output: {
        filename: 'my-first-webpack.bundle.js'
      },
      module: {
        rules: [
          { test: /\.txt$/, use: 'raw-loader' }
        ]
      }
    };

上面的配置`rules`为具有两个必需属性的单个模块定义了一个属性：`test`和`use`。这告诉webpack的编译器如下：

> “嘿webpack编译器，当你遇到解析为`require()`/ `import`statement语句中'.txt'文件的路径时，在将它添加到bundle之前**使用**它`raw-loader`来转换它。”

> 重要的是要记住，在webpack配置中定义规则时，您要在其下定义规则，`module.rules`而不是`rules`。为了您的利益，webpack会在不正确的情况下发出警告。

> 请记住，使用正则表达式匹配文件时，您可能不会引用它。即`/\.txt$/`与`'/\.txt$/'`or不同`"/\.txt$/"`。前者指示webpack匹配以.txt结尾的任何文件，后者指示webpack匹配具有绝对路径'.txt'的单个文件; 这可能不是你的意图。

在[装载程序部分中][Link 7]包含装载程序时，可以检查进一步的自定义。

### 插件 ###

虽然加载器用于转换某些类型的模块，但可以利用插件执行更广泛的任务，如捆绑优化，资产管理和环境变量注入。

> 查看[插件界面][Link 8]以及如何使用它来扩展webpack的功能。

要使用插件，您需要将`require()`其添加到`plugins`数组中。大多数插件都可以通过选项进行自定义。由于您可以在配置中多次使用插件用于不同目的，因此您需要通过使用`new`运算符调用它来创建它的实例。

**webpack.config.js**

在上面的示例中，`html-webpack-plugin`通过自动注入所有生成的包来为应用程序生成HTML文件。

> webpack提供了许多开箱即用的插件！查看[插件列表][Link 9]。

在webpack配置中使用插件非常简单。但是，有许多用例值得进一步探索。[在此了解更多相关信息][Link 10]。

### 模式 ###

通过设定`mode`参数设置为`development`，`production`或者`none`，您可以启用对应于每个环境的WebPack内置的优化。默认值为`production`。

module.exports = {
      mode: 'production'
    };

详细了解[此处][Link 11]的[模式配置][Link 11]以及对每个值进行的优化。

### 浏览器兼容性 ###

webpack支持所有[符合ES5标准的][ES5]浏览器（不支持IE8及以下版本）。WebPack需要`Promise`的[`import()`和`require.ensure()`][import_require.ensure]。如果要支持旧版浏览器，则需要在使用这些表达式之前[加载polyfill][polyfill]。

## 进阶 ##

*  [手动捆绑应用程序][Link 12]
 *  [实时编码简单的模块捆绑器][Link 13]
 *  [简单模块Bundler的详细说明][Bundler]

[WebPack]: https://webpack.js.org/
[WebPack 1]: https://www.webpackjs.com/
[WebPack 2]: http://doc.codingdict.com/webpack-cn-doc/
[webpack]: https://www.imooc.com/learn/802
[Vue_Webpack_todo]: https://www.imooc.com/learn/935
[Webpack4.0]: https://coding.imooc.com/class/316.html#Anchor
[Link 1]: https://webpack.js.org/concepts/dependency-graph/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70]: /images/20230531/c7cf49d069df45e4ae056fccc3f40246.png
[Link 2]: https://webpack.js.org/comparison/
[Node.js]: https://nodejs.org/en/
[npm scripts]: https://docs.npmjs.com/misc/scripts
[webpack 1]: https://webpack.js.org/configuration
[Link 3]: https://webpack.js.org/concepts/entry-points
[Node.js 1]: https://nodejs.org/api/modules.html
[Link 4]: https://webpack.js.org/configuration/output
[Link 5]: https://webpack.js.org/concepts/output
[Link 6]: https://webpack.js.org/concepts/modules
[Link 7]: https://webpack.js.org/concepts/loaders
[Link 8]: https://webpack.js.org/api/plugins
[Link 9]: https://webpack.js.org/plugins
[Link 10]: https://webpack.js.org/concepts/plugins
[Link 11]: https://webpack.js.org/configuration/mode
[ES5]: https://kangax.github.io/compat-table/es5/
[import_require.ensure]: https://webpack.js.org/guides/code-splitting/#dynamic-imports
[polyfill]: https://webpack.js.org/guides/shimming/
[Link 12]: https://www.youtube.com/watch?v=UNMkLHzofQI
[Link 13]: https://www.youtube.com/watch?v=Gc9-7PBqOC8
[Bundler]: https://github.com/ronami/minipack