Webpack4学习

在说明为什么选择使用webpack，让我们回顾一下在bundler出现之前我们是如何在web上使用JavaScript的。 在浏览器中运行JavaScript有两种方法。 第一种，每个功能都作为一个脚本引入;这方式很难扩展，因为加载太多脚本会导致网络瓶颈。 第二种，使用一个包含…

在开始之前，请确保安装了 Node.js 的最新版本。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能或者缺少相关 package 包。 不推荐全局安装 webpack。 这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack …

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个…

在package.json文件所在目录下新建webpack.config.js文件。完成之后目录格式如下 调整 package.json 文件，以便确保安装包是 private (私有的)，并且移除 main 入口。这可以防止意外发布你的代码。 在package.json文件所…

其中 build 是 指令名称，根据需要自定义即可；webpack 是重要的指令，不能写错。 在控制台中输入指令，即可生成 main.js 文件。 打开index.html文件即可看到 Hello webpack 字样。

为了在 JavaScript 模块中 import 一个 CSS 文件，需要使用 style-loader 和 css-loader，对CSS文件进行处理；然后，在此模块执行过程中，将含有 CSS 字符串的 <style> 标签，插入到 html 文件的 中。 再次在浏览器中打…

语法和 JavaScript 语法一样，区别是使用的图片的路径是 webpack 通过file-loader或者url-loader 处理过的路径。 在 import MyImage from './my-image.png' 时，此图像将被处理并添加到 output 目录,即…

使用 file-loader 来处理字体文件。 加载图片时已经安装过 file-loader ，无需重复安装。 即可看到华文彩云字体的 Hello webpack ！ 字样。

内置支持 JSON 解析，也就是说 import Data from './data.json' 默认将正常运行。 解析 xml 文件需要 xml-loader 支持。 解析 csv 文件需要 csv-loader 支持。

index.html 文件是手动创建编辑的，js 文件是 webpack 自动生成的。当js文件名称改变时还需要手动修改 index.html 文件，随着应用程序增长， index.html 文件进行管理，一切就会变得困难起来。然而，可以通过插件 HtmlWebpackPlug…

由于每次执行构建命令，webpack 都会在 dist 目录生成文件，导该目录 文件夹相当杂乱。 通常，在每次构建前清理 dist 目录，是比较推荐的做法，因此只会生成用到的文件。通过 clean-webpack-plugin 插件完成自动清理任务。 在 Chrome 浏览器中…

每次要编译代码时，手动运行 npm run build 就会变得很麻烦。使用 webpack-dev-server 可以帮助你在代码发生变化后自动编译代码。提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。 以上配置告知 webpack-d…

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性，例如 import 和 export。 将应用程序想象成一棵树。绿叶表示实际用到的 source cod…

在 10-webpack自动生成 index.html 之后，开始使用 html-webpack-plugin 自动生成的 html 文件，压缩功能也要通过他来完成。

设置 mode 为 production 配置后，webpack v4+ 会默认压缩你的代码。生产环境下默认使用 TerserPlugin ，并且也是代码压缩方面比较好的选择。

从 06-webpack 加载 CSS 之后，能够正常加载 CSS ，并且能够正常显示。 要看到压缩 CSS 代码效果，需要先把 CSS 从 bundle.js 中抽离出来，并导入独立的文件中去，然后再添加压缩操作。 需要通过 mini-css-extract-plugin 插…

在 07-加载图片 之后，便可以正常加载和显示图片了；但是这些图片都是未经压缩的原尺寸，webpack 通过 image-webpack-loader 压缩图片。 图片大小尺寸从51KiB变成22.4 KiB，并且 index.html能够正常显示图片。

在 10- webpack 自动生成 index.html 之后，index.html 的自动生成任务 由 html-webpack-plugin 接管。 有时候会面临需要将一段 html标签内容、初始化页面的JavaScript、初始化样式CSS 需要内联的需要，可以直接写到…

通过 url-loader 将小文件转换成 base64 URIs 内联到 bundle.js 中，可以减少 HTTP 请求次数。 输出的资源只有一张 51Kib 的图片，22Kib 的图片被转换成 base64 Uris 字符串内联到 bundle.js 中去了。 在Chro…

在 08-webpack加载字体 中，使用 file-loader 可以加载字体资源。 通过 url-loader 将小文件转换成 base64 URIs 内联到 bundle.js 中，可以减少 HTTP 请求次数。 添加 华文彩云.ttf 字体库,大小为 5.7 MB。 输…