duansamve的博客

【代码】Webpack5入门到原理20：Vue 脚手架搭建。

开发模式配置生产模式配置其他配置。

钩子的本质就是：事件。为了方便我们直接介入和控制编译过程，webpack 把编译过程中触发的各类关键事件封装成事件接口暴露了出来。这些接口被很形象地称做：hooks（钩子）。开发插件，离不开这些钩子。

帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。

所谓高级配置其实就是进行 Webpack 优化，让我们代码在编译/运行时性能更好~主要介绍 Webpack 高级配置。

【代码】Webpack5入门到原理25：总结。

打包代码时会将所有 js 文件打包到一个文件中，体积太大了。我们如果只要渲染首页，就应该只加载首页的 js 文件，其他文件不应该加载。所以我们需要将打包生成的文件进行代码分割，生成多个 js 文件，渲染哪个页面就只加载某个 js 文件，这样加载的资源就少，速度就更快。

如果没有特殊处理的话我们打包时会引入整个库，但是实际上可能我们可能只用上极小部分的功能。是一个术语，通常用于描述移除 JavaScript 中的没有使用上的代码。开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。开发时我们定义了一些工具函数库，或者引用第三方工具函数库或组件库。Babel 为编译的每个文件都插入了辅助代码，使代码体积过大！默认情况下会被添加到每一个需要它的文件中。这样将整个库都打包进来，体积就太大了。我们可以对图片进行压缩，减少图片体积。并且使所有辅助代码从这里引用。

开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。

所有 css 和 js 合并成了一个文件，并且多了其他代码。此时如果代码运行出错那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多，那么很难去发现错误出现在哪里。所以我们需要更加准确的错误提示，来帮助我们更好的开发代码。

默认生产模式已经开启了：html 压缩和 js 压缩。

Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式这样对于网站来说，会出现闪屏现象，用户体验不好我们应该是单独的 Css 文件，通过 link 标签加载性能才好。

生产模式是开发完成代码后，我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化，让其运行性能更好。优化主要从两个角度出发:优化代码运行性能优化代码打包速度。

每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化。

去掉引入的 js 文件，因为 HtmlWebpackPlugin 会自动引入。此时 dist 目录就会输出一个 index.html 文件。

有人可能会问，js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。其次开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。针对 js 兼容性处理，我们使用 Babel 来完成针对代码格式，我们使用 Eslint 来完成。

开发中可能还存在一些其他资源，如音视频等，我们也一起处理了。

type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式。type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理。打开 index.html 页面查看效果。

观察 dist 目录资源情况。

（注意：需要将上次打包生成的文件清空，再重新打包才有效果）

过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源。

Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用官方文档找不到的话，可以从社区 Github 中搜索查询Webpack 官方 Loader 文档css-loader：负责将 Css 文件编译成 Webpack 能识别的模块style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容。

开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源。提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。提前检查代码的一些隐患，让代码运行时能更加健壮。开发模式顾名思义就是我们开发代码时使用的模式。1、编译代码，使浏览器能识别运行。2、代码质量检查，树立代码规范。

在开始使用 Webpack 之前，我们需要对 Webpack 的配置有一定的认识。

Webpack 本身功能是有限的:开发模式：仅能编译 JS 中的 ES Module 语法生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码。

开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。所以我们需要打包工具帮我们做完这些事。除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。

我们预期的脚手架具有如下功能：开发组件时可以实时预览对组件各种资源进行打包(js/css/图片等)一键打包发布

vue-cli3.0如何在打包时设置静态资源目录？

一、传递：格式npm run demo -- --url=http://www.baidu.comdemo替换成自己的命令，注意后面的参数必须是两个-- --key=value二、获取将process.env.NODE_ENV全局化：如果在业务代码中，需要根据开发环境，动态改变数据请求地址，会更加自动化，所以不仅仅在打包配置中我们需要使用 process.env.NODE_ENV，在其他模块中，仍要使用它，则需要将其全局化。在webpack.config.js中....

react打包发生产时速度有点慢，我不想要sourceMap文件，于是在build改了一下脚本命令："build": "GENERATE_SOURCEMAP=false react-app-rewired build"

一、安装webpack和webpack-cli：npm i webpack@4.41.2 webpack-cli@3.3.10 -g //全局安装，作为指令使用npm i webpack@4.41.2 webpack-cli@3.3.10 -D //本地安装，作为本地依赖使用二、指令方式运行：开发配置指令：webpack src/js/index.js -o dist/js/index.js --mode=development生产配置指令：webpack src/js/in

七、项目优化及拓展7.1 代码分离在当前的开发环境都是提倡模块化，webpack自然不例外，我们前面的webpack.config.js配置文件，其实也没配置多少东西就这么多了，要是以后增加了更多配置，岂不是看得眼花缭乱，所以最好的方法就是把它拆分，方便管理：1. 我们在根目录下新建三个文件，分别为webpack.common.js、webpack.dev.js、webpack.pro...

六、插件（Plugins）插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。6.1 插件如何使用使用...

前言本文主要从webpack4.x入手，会对平时常用的Webpack配置一一讲解，各个功能点都有对应的详细例子，所以本文也比较长，但如果你能动手跟着本文中的例子完整写一次，相信你会觉得Webpack也不过如此。一、什么是webpack，为什么使用它？1.1 什么是webpack？简单来说，它其实就是一个模块打包器。1.2 为什么使用它？如果像以前开发时一个html文件可...

原理：把自己的样式文件定义为.scss文件，第三方样式表还是定义为.css文件，我们只需为.scss文件启用模块化即可。步骤：1、安装能解析scss文件的loader：cnpm i sass-loader node-sass -D2、配置webpack.config.js： module: { // 所有第三方模块的配置规则 rules: [ //...

1、安装bootstrap3.3.7cnpm i bootstrap@3.3.7 -S2、安装处理字体的loader：cnpm i url-loader file-loader -D3、webpack.config.js中配置处理字体的loader：{test: /\.ttf|woff|woff2|eot|svg$/,use: "url-loader"} // 打包处理字...

1、安装style.loader和css.loader：cnpm i style-loader css-loader -D2、在webpack中配置css loader：{ test: /\.css$/, use: ["style-loader", "css-loader"] //打包处理css样式表的第三方loade...

webpack.config.js中resolve配置项添加alias： resolve: { extensions: [".js", ".jsx", ".json"], alias: { "@": path.join(__dirname, "./src") // 这样@符号就表示项目根目录中src这一层路径 }...

webpack.config.js中添加resolve配置项：resolve: { extensions: [".js", ".jsx", ".json"]}全部配置如下：const path = require("path")const htmlWebpackPlugin = require("html-webpack-plugin") // 导入 在内存中自...

1、安装：cnpm i html-webpack-plugin -D2、webpack.config.js中配置plugins属性：const path = require("path")const htmlWebpackPlugin = require("html-webpack-plugin") // 导入 在内存中自动生成html文件 的插件// 创建一个插件的实例对象...