webpack学习笔记
好_快
这个作者很懒,什么都没留下…
展开
-
自定义 webpack 配置1:基础配置
参考 webpack教程、create-react-app(eject后)配置,自定义一个适合的、可维护的webpack配置1.初始化yarn init初始化成功yarn init v1.17.3question name (my-webpack-config): question version (1.0.0): question description: question entry point (index.js): question repository url (https.原创 2020-09-04 11:41:16 · 406 阅读 · 1 评论 -
自定义 webpack 配置4:优化配置
参考 webpack教程、create-react-app(eject后)配置,自定义一个适合的、可维护的webpack配置1. 保持版本最新较新的版本能够建立更高效的模块树以及提高解析速度。1.1 Node.js1.1.1 最新版本v14.7.01.1.2 查看本地版本node -v//或者node --version1.1.3 下载安装最新版本1.2 npm1.2.1 最新版本v6.14.71.2.2 查看本地版本npm -v//或者npm --version.原创 2020-09-04 11:43:26 · 428 阅读 · 0 评论 -
自定义 webpack 配置3:增强配置
参考 webpack教程、create-react-app(eject后)配置,自定义一个适合的、可维护的webpack配置1. 自动清理 /dist 文件夹设置缓存配置后,内容变更后的每次构建都会生成新的文件。但是 webpack 无法追踪到哪些文件是实际在项目中用到的。然后,需要在每次构建前清理 /dist 文件夹。使用插件可以自动完成。1.1 安装依赖yarn add clean-webpack-plugin -D1.2 修改 webpack.prod.js 文件const { me.原创 2020-09-04 11:42:51 · 492 阅读 · 0 评论 -
自定义 webpack 配置2:缓存配置
参考 webpack教程、create-react-app(eject后)配置,自定义一个适合的、可维护的webpack配置使用 webpack 来打包我们的模块化后的应用程序,会生成一个可部署的 /dist 目录,打包后的内容放置在此目录中。只要 /dist 目录中的内容部署到服务器上,客户端(通常是浏览器)就能够访问网站此服务器的网站及其资源。浏览器使用一种名为缓存的技术。可以通过命中缓存,以降低网络流量,使网站加载速度更快。在部署新版本时不更改资源的文件名,浏览器可能会认为它没有被更新.原创 2020-09-04 11:42:15 · 482 阅读 · 0 评论 -
10- webpack 自动生成 index.html
index.html 文件是手动创建编辑的,js 文件是 webpack 自动生成的。当js文件名称改变时还需要手动修改 index.html 文件,随着应用程序增长, index.html 文件进行管理,一切就会变得困难起来。然而,可以通过插件 HtmlWebpackPlugin ,自动完成这个任务。一、安装插件npm install --save-dev html-webpack-plug...原创 2019-07-21 16:23:29 · 2203 阅读 · 0 评论 -
11- webpack 自动清理 dist 目录
由于每次执行构建命令,webpack 都会在 dist 目录生成文件,导该目录 文件夹相当杂乱。通常,在每次构建前清理 dist 目录,是比较推荐的做法,因此只会生成用到的文件。通过clean-webpack-plugin 插件完成自动清理任务。一、安装插件npm install --save-dev clean-webpack-plugin//yarn add clean-webp...原创 2019-07-21 16:24:42 · 1425 阅读 · 2 评论 -
12- webpack 自动编译代码
每次要编译代码时,手动运行 npm run build 就会变得很麻烦。使用 webpack-dev-server 可以帮助你在代码发生变化后自动编译代码。提供了一个简单的 web 服务器,并且能够实时重新加载(live reloading)。一、安装npm install --save-dev webpack-dev-server//或者yarn add webpack-dev-ser...原创 2019-07-21 16:25:46 · 766 阅读 · 0 评论 -
18-webpack 实现 Html、JavaScript、CSS 内联
在 10- webpack 自动生成 index.html 之后,index.html 的自动生成任务 由 html-webpack-plugin 接管。有时候会面临需要将一段 html标签内容、初始化页面的JavaScript、初始化样式CSS 需要内联的需要,可以直接写到 index.html 中去,但是为了方便维护最好还是把文件独立出来,然后由 webpack 自动完成内联任务。webp...原创 2019-07-25 17:43:34 · 1316 阅读 · 0 评论 -
19-webpack 加载图片优化
在 07-webpack加载图片 中,有2中方式可以加载图片资源通过 JavaScript ,使用 file-loader通过 CSS ,使用 style-loader其中,使用 file-loader 通过 JavaScript 加载图片的方式还可以继续优化。通过 url-loader 将小文件转换成 base64 URIs 内联到 bundle.js 中,可以减少 HTTP 请求次...原创 2019-07-26 14:55:26 · 379 阅读 · 0 评论 -
20-webpack 加载字体优化
在 08-webpack加载字体 中,使用 file-loader 可以加载字体资源。通过 url-loader 将小文件转换成 base64 URIs 内联到 bundle.js 中,可以减少 HTTP 请求次数。一、添加字体添加 华文彩云.ttf 字体库,大小为 5.7 MB。二、编辑 index.jsimport "./style.css"function component...原创 2019-07-26 15:33:31 · 651 阅读 · 0 评论 -
13- webpack tree shaking
由于 tree shaking 是 webpack 的内置功能,生产模式下默认开启,此处只做验证性演示一、简介1.1 功能tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性,例如 import 和 export。1.2 寓意将应用程序想象成一棵树。绿叶表示实际用到...原创 2019-07-23 11:58:18 · 143 阅读 · 0 评论 -
04- webpack 起步
一、使用配置文件1.1 新建配置文件在package.json文件所在目录下新建webpack.config.js文件。完成之后目录格式如下 demo04 |- package.json |- webpack.config.js1.2 编辑文件内容指定入口文件和输出路径const path = require('path');module.exports = { ...原创 2019-07-17 11:56:22 · 173 阅读 · 0 评论 -
17-webpack 压缩图片
在 07-加载图片 之后,便可以正常加载和显示图片了;但是这些图片都是未经压缩的原尺寸,webpack 通过 image-webpack-loader 压缩图片。一、添加图片在 src 目录下添加 icon.jpg 图片,编辑index.jsimport "./style.css"import Icon from './icon.jpg';//生成一个内容为Hello webpack !...原创 2019-07-24 10:32:12 · 635 阅读 · 1 评论 -
03-webpack核心概念
1、概念本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。从 webpack v4.0.0 开始,可以不用引入一个配置文件。然而,webpack ...原创 2019-05-30 19:02:46 · 109 阅读 · 0 评论 -
01-为什么选择选择webpack
一、历史演化可直接跳过看后续部分在说明为什么选择使用webpack,让我们回顾一下在bundler出现之前我们是如何在web上使用JavaScript的。1、JavaScript以前用法在浏览器中运行JavaScript有两种方法。第一种,每个功能都作为一个脚本引入;这方式很难扩展,因为加载太多脚本会导致网络瓶颈。第二种,使用一个包含所有项目代码的.js文件,但这会导致范围、大小、...原创 2019-05-29 17:07:32 · 135 阅读 · 0 评论 -
05-使用 npm scripts 运行webpack
使用以下命令运行本地webpack不是特别方便,npx webpack//或者npx webpack --config webpack.config.js可以设置使用快捷方式:npm scripts一、 添加 npm scripts编辑 package.json 文件,添加在 npm scripts 中添加一个 npm 命令:{ "name": "demo02", "ver...原创 2019-07-18 17:34:34 · 195 阅读 · 0 评论 -
06- webpack 加载 CSS
为了在 JavaScript 模块中 import 一个 CSS 文件,需要使用 style-loader 和 css-loader,对CSS文件进行处理;然后,在此模块执行过程中,将含有 CSS 字符串的 一、安装 loadernpm install --save-dev style-loader css-loader//或者yarn add style-loader css-loader...原创 2019-07-18 17:36:30 · 121 阅读 · 0 评论 -
07- webpack 加载图片
一、安装npm install --save-dev file-loader//或者yarn add file-loader --dev二、编辑 webpack.config.jsconst path = require('path'); module.exports = { entry: './src/index.js', output: { fil...原创 2019-07-18 17:37:23 · 241 阅读 · 0 评论 -
08- webpack 加载字体
使用 file-loader 来处理字体文件。一、安装loader加载图片时已经安装过 file-loader ,无需重复安装。npm install --save-dev file-loader//或者yarn add file-loader --dev二、编辑 webpack.config.js 文件 const path = require('path'); modu...原创 2019-07-18 17:41:03 · 250 阅读 · 0 评论 -
09- webpack 加载数据文件 json、xml、csv
一、加载 json 文件内置支持 JSON 解析,也就是说 import Data from './data.json' 默认将正常运行。1.1 添加 json 文件 demo09 |- package.json |- webpack.config.js |- /dist |- bundle.js |- index.html |- /src |- 华...原创 2019-07-18 17:42:33 · 2516 阅读 · 0 评论 -
14- webpack 压缩 html 代码
在 10-webpack自动生成 index.html 之后,开始使用 html-webpack-plugin 自动生成的 html 文件,压缩功能也要通过他来完成。一、编辑 webpack.config.jsconst path = require('path');const HtmlWebpackPlugin = require("html-webpack-plugin");modu...原创 2019-07-23 17:21:07 · 1151 阅读 · 0 评论 -
15-webpack 压缩 JavaScript 代码
由于 TerserPlugin 是 webpack4+ 的内置功能,生产模式下默认开启,此处只做验证性演示设置 mode 为 production 配置后,webpack v4+ 会默认压缩你的代码。生产环境下默认使用 TerserPlugin ,并且也是代码压缩方面比较好的选择。一、未压缩 bundle.jsconst path = require('path');const Ht...原创 2019-07-23 17:22:19 · 539 阅读 · 0 评论 -
16-webpack 压缩 CSS 代码
从 06-webpack 加载 CSS 之后,能够正常加载 CSS ,并且能够正常显示。要看到压缩 CSS 代码效果,需要先把 CSS 从 bundle.js 中抽离出来,并导入独立的文件中去,然后再添加压缩操作。一、导出 CSS 到独立文件需要通过 mini-css-extract-plugin 插件来完成。1.1 安装npm install --save-dev mini-css-e...原创 2019-07-23 17:23:22 · 648 阅读 · 0 评论 -
02-webpack安装
1、 前提条件在开始之前,请确保安装了 Node.js 的最新版本。使用旧版本,你可能遇到各种问题,因为它们可能缺少 webpack 功能或者缺少相关 package 包。2、安装方式安装方式有2种:全局安装本地安装2.1 全局安装通过以下的 NPM 安装指令,将使 webpack 在全局环境下可用:npm install --global webpack不推荐全局安装 w...原创 2019-05-30 11:27:41 · 357 阅读 · 0 评论