webpack学习笔记(11)-高级篇(2)-提升打包构建速度篇
HotModuleReplacement(热模替换)
开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。
所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。
什么是HotModuleReplacement(热模替换)
HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。
使用热模替换前:(开发服务器 => hot:false)
关闭热模替换后,每一次改动样式代码,页面重新加载
使用热模替换前:(开发服务器 => hot:true)修改样式过后页面不再刷新就能实现变换
开启热模替换后,每一次改动样式代码,页面不会重新加载,只会重新加载相对应的修改过后的模块并在控制台输出
热模替换的使用(hot配置)样式的基本配置// 配置开发服务器: 不会输出任何资源, 在内存中的编译打包的*******************************devServer: &# ...
webpack学习笔记(10)-高级篇(1)-提升开发体验篇[SourceMap]
为什么需要SourceMap
开发时我们运行的代码是经过 webpack 编译后的，例如下面这个样子：
经过webpack压缩过后, 所有 css 和 js 合并成了一个文件，并且多了其他代码。此时如果代码运行出错那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多，那么很难去发现错误出现在哪里。
这里故意设置sum.js出错(调用两次 return 致使代码出现问题)
// 简单的加法函数[es6语法,数组的累加器方法(reduce)]export default function sum (...args){ return args.reduce((p , c) => p + c , 0)();//这里调用两次return导致代码出错}
此时浏览器的控制台报告错误如下:
由此可见,我们看到控制台报错是编译后的,并非源码
因此,我们需要更加准确的错误提示，来帮助我们更好的开发代码。
什么是SourceMap
SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。
它会生成一个 xxx.m ...
webpack学习笔记(9)-css处理和html 压缩
1. 提取 Css 成单独文件(MiniCssExtractPlugin)
Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式
这样对于网站来说，会出现闪屏现象，用户体验不好
我们应该是单独的 Css 文件，通过 link 标签加载性能才好
闪屏现象如下:
这时我们就用到一个插件MiniCssExtractPlugin该插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。
官方文档
使用方法:1.下载包npm i mini-css-extract-plugin -D
2.配置webpack.prod.js(将所有的style-loder改成MiniCssExtractPlugin.loader)// 使用的是commonjs 的语法格式[node.js]const path = require("path");//node.js中的核心模块,专门用于处理路径问题// 引入eslintconst ESLint ...
webpack学习笔记(8)-开发服务器(devServer)以及生产模式的介绍
开发服务器&自动化
我们每一次写完代码或者更新代码都要手动的输入webpack指令来重新打包才能编译代码,这样太麻烦了,我们希望一切都能够自动化实现,页面或者打包资源能够随着我们源码的改动而重新执行打包最后渲染到页面上,这时我们就需要开发服务器了
开发服务器:顾名思义,webpack-dev-server 是 Webpack 官方支持的基于 CLI 的工具,它的作用: 当代码发生变化时，只重新打包变化的代码，自动更新到页面，但是打包的资源存放到内存中，并不会打包到项目的指定位置(即没有输出,不会输出打包好的资源到dist中), 随后自动刷新浏览器。
使用方法:
下载包
npm i webpack-dev-server -D
配置webpack.config.js
// 使用的是commonjs 的语法格式[node.js]const path = require("path");//node.js中的核心模块,专门用于处理路径问题// 引入eslintconst ESLintWebpackPlugin = require("eslin ...
webpack学习笔记(7)-处理html资源
处理 Html 资源(HtmlWebpackPlugin)
现阶段的每一次打包成功过后，我们都是手动引入的打包生成的js资源,但问题是,将来我们打包输出的js资源的名字是不固定的(即不一定叫main.js)并且后续我们打包生成的js资源也许是多个js文件甚至是多个css文件,因此我们不可能在index.html中一个一个的引入,这样太麻烦了并且不同的资源之间还可能存在不同的依赖关系,引错了还可能会报错,因此我们就需要自动引入打包好的资源,这是最方便的
webpack官方文档
这个插件将为你生成一个 HTML5 文件(路径:dist/index.html)， 在 body 中使用 script 标签引入你所有 webpack(打包) 生成的资源,如果你有多个 webpack 入口，他们都会在已生成 HTML 文件中的 <script> 标签内引入。如果在 webpack 的输出中有任何 CSS 资源（例如，使用 MiniCssExtractPlugin 提取的 CSS），那么这些资源也会在 HTML 文件 <head> 元素中的 <link> 标签 ...
webpack学习笔记(6)-Babel的基本使用
1. 初识Babel
Babel是一个JavaScript 编译器。主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中
它在webpack中主要是已loader的形式使用的
配置文件:
配置文件由很多种写法：
babel.config.*：新建文件，位于项目根目录
babel.config.js(常用)
babel.config.json
.babelrc.*：新建文件，位于项目根目录
.babelrc
.babelrc.js
.babelrc.json
package.json 中 babel：不需要创建文件，在原有文件基础上写
Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可
具体配置:
我们以 babel.config.js 配置文件为例：
module.exports = { // 预设 presets: [],};
presets 预设
简单理解：就是一组 Babel 插件, 扩展 Babel 功能
@babel/prese ...
webpack学习笔记(5)-Eslint语法检查
1.初识Eslint
ESLint 是一个代码检查工具，用来检查你的代码是否符合指定的规范（例如： = 的前后必须有一个空格）。
使用ESLint的好处在于：多人协作时代码风格统一
EsLint其实就是一个在webpack中配置的一个插件
配置文件
我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查
配置文件的多种写法
.eslintrc.*：新建文件，位于项目根目录
.eslintrc
.eslintrc.js(常用)
.eslintrc.json(常用)
区别在于配置格式不一样
package.json 中 eslintConfig：不需要创建文件，在原有文件基础上写
ESLint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可
具体配置
我们以 .eslintrc.js 配置文件为例：
module.exports = { // 解析选项 parserOptions: {}, // 具体检查规则 rules: ...
webpack学习笔记(4)-修改输出资源的名称和路径,自动清空上次的打包内容,处理字体图标资源及其他静态资源
webpack学习笔记(4)-修改输出资源的名称和路径1.修改资源的输出路径和名称
配置
// 使用的是commonjs 的语法格式[node.js]const path = require("path");//node.js中的核心模块,专门用于处理路径问题module.exports = { // 入口 // 相对路径和绝对路径都行 entry:"./src/main.js",//相对路径 // 输出 output:{ // 所有文件的输出目录,必须是绝对路径 // path.resolve()方法返回一个绝对路径 // __dirname为node.js中的变量,代表当前文件的文件夹名(就是这个文件夹的webpack_code) path: path.resolve(__dirname , "dist"),//绝对路径 /*修改js文件输出位置------------------------------ ...
webpack学习笔记(3)-处理样式资源以及图片资源
webpack学习学习笔记(3) - 处理样式资源以及图片资源
Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源
我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用
官方文档找不到的话，可以从社区 Github 中搜索查询
Webpack 官方 Loader 文档
处理 Css 资源
下载包
npm i css-loader style-loader -D
注意：需要下载两个 loader(css-loader 和 style-loader)
功能介绍
css-loader: 负责将 Css 文件编译成 Webpack 能识别的模块
style-loader: 会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容
配置
const path = require("path");module.exports = { entry: "./src/main.js", output: { ...
webpack学习笔记(2)-webpack的基本配置
webpack学习学习笔记(2) - webpack的基本配置5 大核心概念
entry（入口）
指示 Webpack 从哪个文件开始打包
output（输出）
指示 Webpack 打包完的文件输出到哪里去，如何命名等
loader（加载器）
webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析
plugins（插件）
扩展 Webpack 的功能
mode（模式）
主要由两种模式：
开发模式：development
生产模式：production
准备webpack配置文件
在项目根目录下新建文件：webpack.config.jsmodule.exports = { // 入口 entry: "", // 输出 output: {}, // 加载器 module: { rules: [], }, // 插件 plugins: [], // 模式 mode: "",} ...
